如何用CSS Grid实现动态列的水平空间分配？

需要创建类表格结构：部分行分为灰色列，另一部分行是通栏（占满整宽），且通栏行后需留边距，因此无法使用<table>标签。

当前通过grid-template-columns: repeat(3, 1fr);实现了固定3列的效果，但实际列数是动态的（由标记中的div数量决定）。尝试使用auto-fill时，灰色列被100px限制无法填满行宽。

请问如何无需在CSS中指定列数，让灰色列填满整行？

使用CSS Grid的auto-fit配合minmax(0, 1fr)即可实现动态列数的等宽布局，同时保留通栏行的全宽特性，无需手动指定列数：

1. 给.row设置grid-template-columns: repeat(auto-fit, minmax(0, 1fr))，让Grid根据当前行的.cell数量自动生成等宽列并填满整行。
2. 保留.wide类的grid-column: 1 / -1设置，确保通栏行占满所有列宽。

CSS代码 #

.container {
  width: 100%;
  margin-bottom: 10px;
}

.row {
  display: grid;
  margin-bottom: 5px;
  /* 核心：自动适配列数，等宽填满整行 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.cell {
  border: 1px solid black;
  background-color: lightgray;
}

.wide {
  grid-column: 1 / -1;
  background-color: wheat;
}

HTML代码 #

<div class="container">
  动态3列布局：
  <div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell wide">Four (wide)</div>
  </div>
  <div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell wide">Four (wide)</div>
  </div>
</div>

<div class="container">
  动态4列布局：
  <div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell wide">Five (wide)</div>
  </div>
  <div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell wide">Five (wide)</div>
  </div>
</div>

• repeat(auto-fit, minmax(0, 1fr))：auto-fit会让Grid容器尽可能容纳列轨道，当轨道数超过子元素数量时自动合并空轨道；minmax(0, 1fr)确保每列最小宽度为0（避免内容过宽导致列无法收缩），最大宽度为1fr（等分剩余空间），从而实现子元素数量变化时自动调整列数并填满整行。
• grid-column: 1 / -1：让通栏元素从第一列延伸到最后一列，无论当前列数多少，都能占满整行宽度。

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