title: grid-row-gap affecting divs with display: none
body: <p>I am currently using CSS grid, and I'm using the <code>grid-row-gap</code> and <code>column-row-gap</code> many places. My problem is that when doing media queries, and some elements/divs are not to be shown at smaller resolution I usually just set them to <code>display: none</code>. However, if I'm not mistaken, even though the element can be seen, the row or column gap feature still applies on the "hidden" element.</p>
  
  <p>Is there any way to fix this, or am I doing something wrong here?</p>
  
  <p>EDIT:</p>
  
  <p>Okay, it seems like <code>display: none</code> don't affect the grid-row-gap - which makes sense. But I found a small workaround by removing the grid-gap and adding a padding instead when the resolution changes. And that seems to do the trick.</p>
  
  <p>Thanks for all the answers.</p>