Why doesn't this CSS grid create the right number of rows and columns?

Basj 0
Viewed 52

This CSS grid creates 7 rows only, as you can see by using "Inspect tool" of the browser. Why?

.grid {
  display: grid;
  grid-gap: 1em;
  height: 100%;
}

.grid8x8 {
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

.element {
  background-color: yellow;
}
<div class="grid grid8x8">
  <div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>

css-grid css html
2 Answers

You have actually 8 rows. What you see with the inspector is the gap between the cells, so for 8 rows there are 7 gaps (red lines are gaps):

enter image description here

If you reduce the gap size, you'll notice how the rows appear:

enter image description here

Note the 8 rows:

enter image description here

Your problem is the grid cell overflowing all the other cells because there's not enough space, because your grid-gap is too high.

Jorge Fuentes González0

Try this:

.grid { display: grid; grid-gap: 1em; height: 70vh; }
.grid8x8 { grid-template-rows: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr); }
.element { background-color: yellow; }
<div class="grid grid8x8">
<div class="element" style="grid-row: 2 / 4; grid-column: 3 / 6;">TEST</div>
</div>

Rizeen0
Related