Why does grid-gap cause an overflow?

Question

Why do I have an overflow on the X axis in the following snippet?

The overflow is generated once I apply grid-gap: 10px on my .body grid co

Answer 1

If you want to use percentages or some other unit, there is one more solution. The use of the minmax() function will allow the columns to shrink to fit the parent container and not cause overflow.

The solution would look like this:

grid-template-columns: minmax(auto, 25%) minmax(auto, 50%) minmax(auto, 25%);
gap: 10px;

More on the minmax() function here.

Answer 2

You have a 3-column grid container (.body):

grid-template-columns: 25% 50% 25%

The total width of those columns is 100%.

You're then adding gutters between the columns (and rows):

grid-gap: 10px

which is shorthand for:

grid-column-gap: 10px;
grid-row-gap: 10px;

So when you add up all the widths you get:

25% + 50% + 25% + 10px + 10px

Put more briefly:

100% + 20px > 100%, which results in an overflow condition

(Note: grid-*-gap properties apply only between grid items – never between items and the container. That's why we calculate two grid gaps, not four.)

As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.

grid-template-columns: 1fr 2fr 1fr

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}

<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

revised codepen demo

More details here: The difference between percentage and fr units in CSS Grid Layout

Answer 3

If you have a fixed number of grid columns that should be the same width and use grid-gap, there's a way to do it:

display: grid;
grid-template-columns: repeat(4, calc(25% - 0.75em));
grid-gap: 1em;

In this case, each row would have 4 grid columns, and the total space occupied by grid-gap would be 3em. In order to distribute the overflowing space evenly, divide the space by the number of grid columns.

3em / 4 = 0.75em

This makes all the grid columns have the same width.

Codepen demo