用CSS Grid实现类HTML Table的单元格与列宽布局问题

我需要用类表格结构展示数据，但<table>标签无法满足需求（要在结构内放置表格不允许的元素），因此考虑用CSS Grid。我的目标是让每列宽度等于该列所有单元格中最宽单元格的宽度，实现动态列宽。

目前我的CSS代码如下：

display: grid;
grid-template-columns: repeat(13, 1fr);
width: 100%;
border: 1px solid black;    

使用1fr时所有列宽度一致，没有动态效果；改为auto后，每行的列宽度各不相同。我希望所有行的对应列宽度统一为该列最宽单元格的宽度，类似<table>标签的表现。请问仅用HTML和CSS能否实现？是否需要JS？或者改用Flexbox更合适？

解决方案：纯CSS+HTML即可实现，无需JS，CSS Grid是最优选择 #

问题核心在于HTML结构和Grid容器的作用范围：如果把每一行单独做成一个Grid容器，每行的列宽必然独立；正确的做法是把所有单元格放在同一个Grid容器中，让Grid自动处理行和列的布局，就能实现类似表格的统一列宽效果。

1. 正确的HTML结构

将所有单元格放在单个Grid容器内，每行保持13个单元格（对应你设置的13列）：

<div class="grid-table">
  <!-- 第一行 -->
  <div>短文本</div>
  <div>这是一列比较长的文本内容</div>
  <div>普通文本</div>
  <!-- ... 补充至13个单元格 -->
  
  <!-- 第二行 -->
  <div>更长的测试文本内容示例</div>
  <div>短文本</div>
  <div>普通文本</div>
  <!-- ... 补充至13个单元格 -->
  
  <!-- 后续行按此格式添加 -->
</div>

2. 对应的CSS代码

.grid-table {
  display: grid;
  /* 用auto让每列宽度自适应该列最宽单元格的内容 */
  grid-template-columns: repeat(13, auto);
  border: 1px solid black;
  /* 去掉单元格间隙，模拟表格边框合并效果 */
  gap: 0;
  /* 可选配置：
     - 若希望容器自适应内容宽度，删除width:100%；
     - 若要占满父容器且内容超出时横向滚动，保留以下两行 */
  /* width: 100%; */
  /* overflow-x: auto; */
}

/* 给单元格添加边框，模拟表格样式 */
.grid-table > div {
  border: 1px solid black;
  padding: 6px 8px;
  box-sizing: border-box;
}

3. 为什么Flexbox不合适？

Flexbox是一维布局，用它实现类表格结构存在明显局限：

• 若每行单独做Flex容器，列宽无法跨行列统一；
• 若所有单元格放在单个Flex容器并设置flex-wrap: wrap，无法精准控制每行固定13个单元格（除非手动计算宽度，灵活性远不如Grid）。

因此CSS Grid是更适合的方案，无需JS即可实现你要的效果。

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