如何实现固定100个单元格、行列数灵活的CSS Grid布局？

核心逻辑：总单元格数 = 行数 × 列数 = 100，只需控制其中一个维度的数量，另一维度自动适配即可，无需同时硬编码行列模板。 #

前置基础结构 #

<!-- 网格容器 -->
<div class="grid-container">
  <!-- 100个单元格子元素，推荐用JS动态生成无需手动编写 -->
  <div class="grid-cell"></div>
  <!-- 共100个.grid-cell元素 -->
</div>

动态生成100个单元格的JS代码：

document.querySelector('.grid-container').innerHTML = Array.from({length: 100}, () => '<div class="grid-cell"></div>').join('')

常用实现场景 #

场景1：固定列数，行数自动适配 #

修改grid-template-columns的repeat第一个参数即可调整列数，行数会根据100个单元格自动计算生成：

.grid-container {
  display: grid;
  /* 示例为固定5列，每列宽度等分，修改数字即可调整列数 */
  grid-template-columns: repeat(5, 1fr);
  /* 可选：设置单元格间距 */
  gap: 8px;
  /* 可选：设置统一单元格高度 */
  grid-auto-rows: 80px;
}

注：调整的列数需为100的正约数（1/2/4/5/10/20/25/50/100），避免出现空行/单元格数量溢出。

场景2：固定行数，列数自动适配 #

修改grid-template-rows的repeat第一个参数即可调整行数，列数自动适配：

.grid-container {
  display: grid;
  /* 示例为固定4行，每行高度等分，修改数字即可调整行数 */
  grid-template-rows: repeat(4, 1fr);
  /* 网格自动按列排列 */
  grid-auto-flow: column;
  /* 可选：设置单元格间距 */
  gap: 8px;
  /* 可选：设置统一单元格宽度 */
  grid-auto-columns: 80px;
}

场景3：响应式自适应行列数 #

根据容器宽度自动调整列数，自动计算对应行数，始终保持100个单元格总数量：

.grid-container {
  display: grid;
  /* 单个单元格最小宽度设为100px，自动填充最大可容纳列数 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  grid-auto-rows: 80px;
}
/* 小屏适配示例，调整单元格最小宽度适配移动端 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}

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