Using grid vertically

Is it possible to stretch the grid items vertically to use the 100% of the height (25%) each? https://gyazo.com/05f7dbc1a3d4d4dd1baf42a59c2ca32d The code is just as simple as:
<div class="grid-test">
<div class="test">Content here</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
</div>
<div class="grid-test">
<div class="test">Content here</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
<div style="visibility: hidden;" aria-hidden="true">Filler</div>
</div>
.grid-test {
display: grid;
grid-auto-flow: row;
}

.test {
padding: .25em 0 .25em 1em;
border-radius: .5em 0 0 .5em;
}
.grid-test {
display: grid;
grid-auto-flow: row;
}

.test {
padding: .25em 0 .25em 1em;
border-radius: .5em 0 0 .5em;
}
Gyazo
Gyazo
6 Replies
Myndi
Myndi•3y ago
I tried grid-template-rows: repeat(4, 1fr); but it didn't fill it.
MarkBoots
MarkBoots•3y ago
if the grid has 100% height of the container then you can just do grid-auto-rows: 1fr
Myndi
Myndi•3y ago
🤔 I swear I tried that. I will give it a shot.
MarkBoots
MarkBoots•3y ago
if not, then you'll have to make a codepen
Myndi
Myndi•3y ago
Yeah, it is what you see above, nothing more, nothing else.
MarkBoots
MarkBoots•3y ago
still cant see the html/css of the container
Want results from more Discord servers?
Add your server