如何用CSS Grid或Flexbox实现行结构下的等宽列布局？

AI 小北

2026-6-19

类表格列布局：CSS Grid可实现，无需JavaScript

结论

仅用CSS Grid就能完美实现你要的效果，Flexbox单独无法做到，不需要借助JavaScript。

具体实现方案（CSS Grid）

CSS Grid是二维布局系统，整个容器的列轨道是全局统一的，天然支持跨行列的宽度对齐。只需将最外层容器设为Grid，并通过grid-template-columns定义列规则，再让每行的列元素直接参与网格布局即可。

示例代码：

HTML结构

<div class="table-like-grid">
  <div class="row">
    <div class="col">短内容</div>
    <div class="col">固定300px宽度的列内容</div>
    <div class="col">这列会根据内容自动撑开，所有行的第三列都会对齐这个宽度</div>
  </div>
  <div class="row">
    <div class="col">另一行第一列</div>
    <div class="col">第二列自动匹配300px宽度</div>
    <div class="col">这行第三列内容较短，但宽度和上一行一致</div>
  </div>
</div>

CSS样式

.table-like-grid {
  display: grid;
  /* 定义列规则：第一列自适应内容，第二列固定300px，第三列自适应内容 */
  grid-template-columns: auto 300px auto;
  gap: 10px; /* 可选，列/行之间的间距 */
}

/* 让row元素不成为网格项，直接让内部col参与网格布局 */
.row {
  display: contents;
}

.col {
  padding: 8px;
  border: 1px solid #eee;
}

关键说明：

display: contents 让.row元素的样式被忽略，内部的.col直接成为Grid容器的子元素，从而共享全局的列轨道规则。
grid-template-columns 可以灵活定义列宽：auto表示随内容自适应，固定值（如300px）则强制列宽，所有行对应列都会遵循这个规则。