title: How to hide elements that have content using grid areas in CSS?
body: <p>I'm creating a basic web layout in CodePen to better understand how grid areas work with the CSS Grid module. It turns out that using the <code>.</code> notation doesn't actually "hide" the items, when applied to the <code>grid-template-areas</code> property.</p>
  
  <p>Please see my code here: <a href="https://codepen.io/isaacasante/pen/KZmyKV" rel="nofollow noreferrer">https://codepen.io/isaacasante/pen/KZmyKV</a></p>
  
  <p>You can see that I'm leaving the grid cells below my menu empty, but the <code>section</code> element on which I've added <code>grid-area: random</code> still shows in the bottom right corner of my layout (below my footer).</p>
  
  <p>Do you guys have any idea how I can get rid of it without removing the HTML? I want to use Grid Areas only, to hide it. I noticed that an easy solution is for me to set the padding on the <code>section</code> element to 0, but this isn't a good solution, because it won't work the next time I'm trying to "hide" an element that has content.</p>