CSS Grid如何自动推导行列数量，无需单独编写对应规格样式规则

你可以通过Grid自动布局规则+自动列宽配置完全省略所有行列组合的专用CSS，无需手动推导行列数：

核心实现思路 #

因为你已经给.col设置了display: contents，所有内容元素都会成为Grid容器的直接子项，搭配grid-auto-flow: column规则，Grid会自动按照「先填满一列再填充下一列」的逻辑排列，再通过grid-auto-columns: 1fr强制所有自动生成的列宽度等分，就能实现所有行列组合的自适应，完全不需要为每种2by2/3by3单独写CSS规则。

优化后完整CSS代码 #

/* 所有Grid容器通用样式，无需额外写NbyN的专用规则 */
[class*=' container-grid-'], [class^='container-grid-'] {
  margin-bottom: 2rem;
  display: grid;
  grid-auto-flow: column;
  /* 自动生成的所有列宽度等分，和原来写repeat(N,1fr)效果完全一致 */
  grid-auto-columns: 1fr;
  /* 自动生成的所有行高自动适配内容，同一行高度统一 */
  grid-auto-rows: auto;
  row-gap: 0;
  column-gap: 1rem;
}

[class*=' container-grid-']  > .col, [class^='container-grid-'] > .col {
  display: contents;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
 background-color: skyblue;
}

.limit-width {
  max-width: 20rem;
  background-color: silver;
}

你的原有HTML代码不需要做任何修改，.container-grid-2by2、.container-grid-3by3都可以正常使用，即使后续新增.container-grid-2by3、.container-grid-4by2这类新的行列组合，也不需要添加额外CSS规则，效果和之前手动写硬编码规则完全一致。

可选灵活配置方案 #

如果需要手动控制行列数适配特殊场景，可以用CSS变量简化配置，无需维护多个类名：

/* 通用Grid容器类 */
.container-grid {
  margin-bottom: 2rem;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--cols, auto), 1fr);
  grid-template-rows: repeat(var(--rows, auto), auto);
  row-gap: 0;
  column-gap: 1rem;
}

.container-grid > .col {
  display: contents;
}

使用时直接在HTML行内指定变量即可：

<!-- 2行2列布局 -->
<div class="container-grid" style="--cols:2;--rows:2">
  <!-- 内容省略 -->
</div>

<!-- 3行3列布局 -->
<div class="container-grid" style="--cols:3;--rows:3">
  <!-- 内容省略 -->
</div>

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