Можно ли исключить ребенка из отображения: сетка?

Question

Можно ли исключить дочерние элементы из родительского с помощью display: grid? У меня есть два разных повторяющихся элемента в родительской сетке. Один - это содержимое, а другой - всплывающее окно при щелчке по элементу сетки (при нажатии класс hide будет удален, и элемент будет виден). Поскольку элемент становится видимым (display: block), он занимает пространство внутри сетки, чего не должно быть, потому что он имеет абсолютное / фиксированное отображение, которое добавляет только пустое пространство внутри сетки. Есть ли способ сделать что-то вроде grid-column: none или около того, где элемент будет исключен из сетки или скрыт в любом виде, чтобы он не занимал места?

EDIT

Я добавил код и CSS. Итак, вы видите

<div class="container">
  <div class="content">
    <img class="image">
  </div>
  <div class="popup hide"></div>
  <div class="content">
    <img class="image">
  </div>
  <div class="popup hide"></div>
  <div class="content">
    <img class="image">
  </div>
  <div class="popup hide"></div>
</div>

CSS

.container{
    display: grid;
    grid-template-columns: 19.85vw 19.85vw 19.85vw 19.85vw 19.85vw;
    grid-template-rows: 19.85vw 19.85vw;
    column-gap: 2px;
    row-gap: 2px;
}

.content {
    position: relative;
    cursor: pointer;
}

.image {
    width: 100%;
}

.hide {
    display:none;
}

Вот код на codepen https://codepen.io/myusernamealreadyexists/pen/GRoWKwB (нажмите на первый квадрат, снова нажмите на черный фон для сброса)