Размещает ли сетка макет отображения: ни одного свойства его элементов?

Question

У меня есть контейнер div, установленный на display: grid, и внутри него у меня есть элементы, один из которых установлен на display: none;, а когда нажимается определенная ссылка, на дисплее устанавливается display: block;

Насколько мне известно, display:none полностью удаляет элемент из документа, а не visibility:hidden, который резервирует место элемента в документе (источник: https://www.tutorialrepublic.com/css-tutorial/css-visibility.php).

Я попробовал это с display: block div, и он работал нормально.

Однако в предыдущем сценарии и в следующем коде место для grid-area: story было , а не удалено из документа, хотя я использовал display:none;; Я могу видеть пустое место, в котором оно должно появляться при нажатии на ссылку.

Означает ли это, что, возможно, использование сетки переопределяет свойство display элементов, которые существуют в этой сетке? И если это так, есть ли способ обойти это и спрятать элемент и полностью скрыть его назначенное место?

.container {
  display: grid;
  grid-template-areas: 
   "header header header" 
   "story story story" 
   "footer footer footer" 
   "link link link";
  grid-gap: 1em;
}

.container>div {
  background-color: #eee;
}

.box1 {
  grid-area: header;
}

.box2 {
  grid-area: story;
}

.box3 {
  grid-area: footer;
}

.link {
  grid-area: link;
}

.box2 {
  display: none;
}

.box2:target {
  display: block;
}

<div class="container">
  <div class="box1"> header </div>
  <div id="story" class="box2"> story </div>
  <div class="box3"> footer </div>
  <div class="link">
    <a href="#story">
         Click Me!
       </a>
  </div>
</div>

Answer 1

Проблема здесь в том, что вы определили области, и при скрытии элемента область сохраняется, но не внутри элемента. Чтобы избежать этого, лучше определите шаблон строки, чтобы при скрытии элемента следующий элемент занимал свое место, а последняя область была пустой.

.container {
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr 1fr 1fr; 
  grid-gap: 1em;
}

.container>div {
  background-color: #eee;
}

.box2 {
  display: none;
}

.box2:target {
  display: block;
}

<div class="container">
  <div class="box1"> header </div>
  <div id="story" class="box2"> story </div>
  <div class="box3"> footer </div>
  <div class="link">
    <a href="#story">
     Click Me!
   </a>
  </div>
</div>