Kevin Powell - Community•2y ago

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

6 Replies

Myndi•2y ago

I tried grid-template-rows: repeat(4, 1fr); but it didn't fill it.

MarkBoots•2y ago

if the grid has 100% height of the container then you can just do grid-auto-rows: 1fr

Myndi•2y ago

🤔 I swear I tried that. I will give it a shot.

MarkBoots•2y ago

if not, then you'll have to make a codepen

Myndi•2y ago

Yeah, it is what you see above, nothing more, nothing else.

MarkBoots•2y ago

still cant see the html/css of the container

Gaming

Programming

Using grid vertically