Why doesn't column-count force the exact number of columns?

Question

I have the following code:

.page-grid-layout {
  display: grid;
  column-count: 12;
  column-gap: 32px;
  row-gap: 32px;
  margin: 0 80px;
}

.page-grid-layout .left {
  grid-column: 1/7;
  min-height: 150px;
}

.page-grid-layout .right {
  grid-column: 8/12;
  min-height: 150px;
}

.page-grid-layout .box {
  min-height: 50px;
}

.visual-bounding-box {
  border: 2px solid red;
}

<div class="page-grid-layout">
  <div class="visual-bounding-box left">Left</div>
  <div class="visual-bounding-box right">Right</div>

  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
</div>

What I would expect is that .left spans the first 7 columns, and .right the last five. But there is a gap, a column, and another gap between them. Setting grid-column: 1/8 seems to fix that, but still the right then only spans 4 columns, instead of 5. It seems, on closer inspection, that only 11 columns are made. This is further illustrated by the .box divs, 12 in number, that span a whole row plus one last one is on its own line.

What am I not grokking about css grid? Should I not use it in combination with page margins? The way it shows up in inspector, it's very confusing. It seems almost like the gutters are numbered instead of the actual columns.

Answer 1

So, indeed all I had to do was make it grid-column: 1/8 and grid-column: 8/13 for it to span over the 7/12ths and 5/12ths of the .page-grid-layout respectively. And span 7 / span 5 work too, as long as you don't try to use a variable for the number of columns and inadvertently do

grid-template-columns: repeat(var(--columns, 1fr));

instead of

grid-template-columns: repeat(var(--columns), 1fr);

That was surprisingly difficult to debug :)

Thanks Mikhail and Ori Drori for the answers!

Answer 2

The column-count is part of the CSS Multi-column Layout spec, and not a grid property.

The columns are spanning between lines (the numbered gutters), so the last line of 7 columns is 8:

.page-grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}

.page-grid-layout .left {
  grid-column: 1/8;
  min-height: 150px;
}

.page-grid-layout .right {
  grid-column: 8/13;
  min-height: 150px;
}

.page-grid-layout .box {
  min-height: 50px;
}

.visual-bounding-box {
  border: 2px solid red;
}

<div class="page-grid-layout">
  <div class="visual-bounding-box left">Left</div>
  <div class="visual-bounding-box right">Right</div>

  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
</div>

In your case it's easier to declare how many columns you want using the span keyword:

.page-grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}

.page-grid-layout .left {
  grid-column: span 7;
  min-height: 150px;
}

.page-grid-layout .right {
  grid-column: span 5;
  min-height: 150px;
}

.page-grid-layout .box {
  min-height: 50px;
}

.visual-bounding-box {
  border: 2px solid red;
}

<div class="page-grid-layout">
  <div class="visual-bounding-box left">Left</div>
  <div class="visual-bounding-box right">Right</div>

  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
  <div class="visual-bounding-box box">Box</div>
</div>

Answer 3

Your .left spans 6 columns (grid-column: 1/7), and .right spans 4 columns (grid-column: 8/12). This leaves a gap of 1 column (column 7) and the column-gap between them.

The .box elements are placed in the grid sequentially, but since the grid only has 12 columns, the 12th .box wraps to a new row because there's no space left in the first row.

To achieve the desired layout where .left spans the first 6 columns and .right spans the last 6 columns (with no gap in between), you need to adjust the grid-column values and account for the column-gap.

Here’s the corrected code:

<html>
  <head>
    <style>
      .page-grid-layout {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /* Explicitly define 12 columns */
        column-gap: 32px;
        row-gap: 32px;
        margin: 0 80px;
      }

      .page-grid-layout .left {
        grid-column: 1 / 7; /* Spans columns 1 to 6 */
        min-height: 150px;
      }

      .page-grid-layout .right {
        grid-column: 7 / 13; /* Spans columns 7 to 12 */
        min-height: 150px;
      }

      .page-grid-layout .box {
        min-height: 50px;
      }

      .visual-bounding-box {
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <div class="page-grid-layout">
      <div class="visual-bounding-box left">Left</div>
      <div class="visual-bounding-box right">Right</div>

      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
      <div class="visual-bounding-box box">Box</div>
    </div>
  </body>
</html>

Explicit Column Definition: Added grid-template-columns: repeat(12, 1fr); to explicitly define 12 equal-width columns.

Adjusted grid-column Values: .left now spans 1 / 7 (columns 1 to 6). .right now spans 7 / 13 (columns 7 to 12).

No Gap Between .left and .right: By setting .right to start at column 7, it directly follows .left without leaving a gap.