为何column-count无法强制生成指定数量的CSS Grid列？

问题场景 #

我写了如下代码，预期.left元素横跨前7列，.right元素横跨最后5列，但两者之间有间隙空白；把grid-column改成1/8后，.right还是只占4列，而且实际只生成了11列——12个.box里11个占满一行，最后一个换行。我对CSS Grid哪些概念理解错了？能不能结合页面外边距用？检查器显示逻辑也搞不懂，好像把gutter当成列编号了。

原代码 #

CSS #

.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;
}

HTML #

<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>

核心错误解析 #

1. 误用column-count定义网格列
   column-count是多列布局（Multi-column Layout）的属性，和CSS Grid完全是两套布局体系。你写的column-count:12不会创建12列的Grid容器，浏览器会自动生成列但数量不符合预期，这就是12个.box只排了11个的原因。

2. grid-column范围计算错误
   Grid的列线编号从1开始，grid-column: a/b表示元素从第a条列线延伸到第b条列线，占据的列数是b - a。比如要占7列，应该写1/8（第1到第8条列线，中间7列）；要占5列，需要写8/13（12列的Grid有13条列线）。之前的1/7只占6列，8/12只占4列，自然会出现间隙。

3. 检查器显示误解
   浏览器检查器的Grid可视化里，gutter（列间隙）是列与列之间的空白，不会被算作列编号。你觉得gutter被当列，本质是因为没正确定义Grid列，导致检查器显示的列线数量错误。

4. 外边距可以正常使用
   Grid容器的margin完全可以结合布局使用，它只控制容器整体的左右间距，不会影响内部Grid列的布局逻辑，只要正确定义了Grid列，外边距不会造成问题。

修正后的代码 #

CSS #

.page-grid-layout {
  display: grid;
  /* 定义12个等宽列，每列平分可用空间 */
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 32px;
  margin: 0 80px;
}

.page-grid-layout .left {
  /* 横跨前7列：第1到第8条列线 */
  grid-column: 1 / 8;
  min-height: 150px;
}

.page-grid-layout .right {
  /* 横跨后5列：第8到第13条列线 */
  grid-column: 8 / 13;
  min-height: 150px;
}

.page-grid-layout .box {
  /* 每个盒子占1列 */
  grid-column: span 1;
  min-height: 50px;
}

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

HTML（无需修改） #

<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>

修正说明 #

• 用grid-template-columns: repeat(12, 1fr)明确创建12个等宽列，1fr表示每列平分容器的可用空间。
• 调整grid-column的取值，确保.left和.right刚好衔接，没有间隙。
• 给.box添加grid-column: span 1，明确每个盒子占1列，12个盒子刚好排满一行。

内容的提问来源于stack exchange，提问作者Casca