7 replies

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

KP-C

Kevin Powell - Community•4y ago•

7 replies

Myndi

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

Using grid vertically

Similar Threads

Using grid vertically

Similar Threads

Similar Threads

Similar Threads