Why is the grid-gap ignored on this multi row grid item?

user_2474175 0
Viewed 548

Consider the following example:

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 3;
}
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

Why does the grid-gap on the 5th element work like that? It looks as if the gap is now part of the element. I would expect that the bottom end of the element would be aligned with the bottom end of the 7th element. The 3rd element works as I would expect. Here's the Fiddle.

Edit If the desired effect is to show the last (implicit) row, the solution is to add grid-auto-rows: 1fr;. See Fiddle.

css-grid css
2 Answers

On item 5 you have grid-row: span 3.

You only needed span 2.

With span 3, you've created an extra row, into which the fifth item spans.

Items 7 and 8 aren't set to span that far.

Notice how your grid should have 5 row lines (creating 3 rows), but the span 3 on item 5 creates an unnecessary 6th row line (creating 4 rows).

enter image description here

The span 3 on item 3 works fine.

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 2; /* adjustment */
}
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

The span keyword

Keep in mind that span counts row / column lines.

So referring to the image again:

enter image description here

  • grid-column: 1 / span 4, would span across the entire grid, and create one extra column.

  • grid-row: 2 / span 3, would span down the entire grid, starting at the second row.

  • grid-row: 3 / span 3, would span down the entire grid, starting at the third row, and create an extra row (like the problem in the question)

More about the span keyword in the spec

user_35972760

Because .item5 is only TWO rows tall, not three. The "extra" row is created automatically because you set the span to 3 and thus the extra gap.

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container>div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 2;
  /* not three */
}
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

user_28020400
Related