Spacing between rows wider than intended

Question

I have a grid layout (display: grid) that is 4 cells wide. When there's only two rows, the spacing between them is larger than it's supposed to be. If there's three or more rows, everything looks like it should. This is basically what the html looks like:

<div class="thumbnail-container">
  <div class="thumbnail-grid">
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <div class="thumbnail-grid-cell"></div>
     <!-- and so on... -->
  </div>
</div>

These are my css rules:

.thumbnail-container {
    overflow: scroll;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    height: 250px;
    margin: 8px;
}

.thumbnail-grid-cell {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: relative;
}

Just to clarify:

This is what it looks like with 2 rows:

grid with 2 rows

This is is what it looks like with 3 rows:

grid with 3 rows

The column spacing is always correct.

why is that a problem? And if so, why is that only a problem when there's two rows? The parent for the cells has no width specified. — rune, May 24 '18 at 11:46
Because you have set the grid columns to `auto` width....If you want them equal, set them to `1fr` — Paulie_D, May 24 '18 at 11:51
I've tried to set the grid-template-columns to 1fr, and that didn't make a difference. I tried to set it to all kinds of values, and the spacing between the rows is still the same. Given the fact that this specifies the width, and nothing else, that actually makes sene. — rune, May 24 '18 at 12:13
`1fr` **will** fix it - see - https://codepen.io/Paulie-D/pen/NMVLQe — Paulie_D, May 24 '18 at 12:18
Your example only demonstrate columns spacing, and that is not the problem. I'll add some pictures to clarify what is the problem. — rune, May 24 '18 at 12:37

Michael Benjamin · Accepted Answer · 2018-05-24T16:36:41.753

It's hard to come to a solution here because there isn't enough data to reproduce the problem. But here's what it may be:

Because you haven't explicitly defined any rows in the grid, rows are implicitly added and their heights are set by default to grid-auto-rows: auto.

The auto and 1fr values will stretch to occupy empty space in the container.

So the gap you're seeing in your image #1 is not a gap between rows.

grid with 2 rows

The actual gap between rows is 5px, as set by your grid-row-gap rule.

There is an appearance of a gap between rows because the grid items are not filling the height of the row.

Look at it this way:

There are two rows.
The container is set to height: 250px.
The rows divide the height equally, so each row is 122.5px tall each (after subtracting the 5px grid row gap).
But the items inside those rows are set to height: 100px.
So there's a 22.5px gap between the bottom edge of the items and the bottom edge of the row.

When you have three rows, this free space is needed, and the rows close in.

Here are three potential solutions:

Instead of auto or fr, try grid-auto-rows: min-content
Remove the height: 250px on the container; this sets the height of the container to the height of the content (i.e., height: auto)
Add align-content: start to the container

For more details see these posts:

both 'grid-auto-rows: min-content' AND 'align-content: start' did the trick. Thanks! — rune, May 25 '18 at 05:36

score 0 · Answer 2 · answered May 24 '18 at 12:57

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  margin: 8px;
  background: lightblue;
}

.thumbnail-grid-cell {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

<div class="thumbnail-container">
  <div class="thumbnail-grid">
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
    <div class="thumbnail-grid-cell"></div>
  </div>
</div>

Spacing between rows wider than intended

2 Answers2