能否使用Grid Box实现各行列数非倍数关系的表格布局？

完全可以实现，Grid布局的核心优势就是灵活控制单元格的行/列跨度，不需要依赖各列行数的倍数关系。

实现原理 #

Grid布局允许通过grid-row属性（或grid-row-start/grid-row-end）指定单个单元格跨越的行数，只要提前规划好网格的行轨道，就能轻松实现不同列行数不一致的布局，不管这些行数是否存在倍数关系。

示例代码（模拟类似布局） #

假设目标布局中各列的行结构无倍数关联，比如第一列3行、第二列2行、第三列4行，对应的实现如下：

<div class="grid-table">
  <!-- 第一列 -->
  <div class="cell col1-row1">列1行1</div>
  <div class="cell col1-row2">列1行2</div>
  <div class="cell col1-row3">列1行3</div>
  <!-- 第二列 -->
  <div class="cell col2-span2">列2跨2行</div>
  <!-- 第三列 -->
  <div class="cell col3-span2">列3跨2行</div>
  <div class="cell col3-span2">列3跨2行</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  grid-auto-rows: 70px; /* 自动生成每行高度 */
  gap: 10px; /* 单元格间距 */
  max-width: 800px;
  margin: 0 auto;
}

.col2-span2 {
  grid-row: span 2; /* 跨越2行 */
}

.col3-span2 {
  grid-row: span 2;
}

/* 基础样式美化 */
.cell {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

关键提示 #

• grid-row: span N 是核心，直接定义单元格跨越的行数，无需考虑其他列的行结构
• 可以通过grid-template-rows手动指定行高，或用grid-auto-rows让网格自动适配内容
• 即使各列的总行数差异较大，Grid也会自动扩展行轨道来容纳所有单元格，不会出现布局断裂

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