Does a grid layout override a display:none property of its items?

Question

I have a container div set to display: grid, and inside it, I have elements where one is set to display: none;, and when a certain link is clicked, the display is set to display: block;

My knowledge is that display:none removes the element completely from the document, as opposed to visibility:hidden, which reserves the place of the element in the document (source: https://www.tutorialrepublic.com/css-tutorial/css-visibility.php).

I tried this with a display: block div and it worked fine.

However, with the previous scenario, and with the following code, the place for grid-area: story was not removed from the document even though I used display:none;; I'm able to see the empty place in which it is supposed to appear when the link is clicked.

Does this mean that maybe using a grid overrides the display property of the items that exist within that grid? And if that is so, is there a way to work around this and hide the element along with hiding its designated place completely?

.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

The issue here is that you defined areas and when hidding the element the area is kept but not the element inside. To avoid this better define a row template so that when the element is hidden the next one will get pulled to take its place and the last area will be empty.

.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>