grid-row-gap affecting divs with display: none - css

Question

I am currently using CSS grid, and I'm using the grid-row-gap and column-row-gap 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 display: none. 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.
Is there any way to fix this, or am I doing something wrong here?
EDIT:
Okay, it seems like display: none 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.
Thanks for all the answers.

Answer 1

Is there any way to fix this [...]?
One simple fix when applying display: none; to child elements in a CSS grid, is to remember to alter the parent grid accordingly to take account of the fact that those child elements are no longer displayed.
Working Example:
body > div {
display: inline-grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
grid-row-gap: 6px;
grid-column-gap: 12px;
width: 120px;
height: 120px;
margin-right: 24px;
border: 1px solid rgb(255, 0, 0);
}
div div {
border: 1px solid rgb(255, 0, 0);
}
body > div:hover div:nth-of-type(n+7) {
display: none;
}
body > div:nth-of-type(2):hover {
grid-template-rows: auto auto;
height: 80px;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
In both the CSS Grids above the final three child elements are removed from display on :hover. But in the second grid (only) the height of the parent and the number of grid-template-rows are also reduced, thus avoiding displaying a gap which the non-displayed child elements used to occupy.

Answer 2

You can do this if you use grid-auto-columns (or grid-auto-rows) because the column definitions are dynamic, therefore no column exists if the item is hidden.
In this example I'm using grid-auto-flow: column which is sort of similar to flex-direction: row in this example. It's easier to visualize what's going on if they are columns vs. rows.
Note: grid-auto-flow is supported in IE, but *-auto-columns is.
Important: Don't confuse this with grid-template-columns: auto !
.outer-container
{
background: yellow;
outline: 1px solid black;
}
.container
{
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
grid-gap: 10px;
}
.item
{
background: steelblue;
padding: .5em 1em;
color: white;
}
.item.hidden
{
display: none;
}
<div class="outer-container">
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item hidden">Item 3 (hidden)</div>
</div>
</div>