如何实现同垂直列等宽且列宽自适应内容的CSS布局？

嘿，我完全懂你要的效果——垂直方向上的每一列宽度保持一致，同时列宽能自动适配该列里最宽的元素，不会出现各行列宽“各自为政”的情况对吧？

你之前尝试的两个方案确实都差了点意思：

• Flex方案里，每个<li>都是独立的flex容器，所以每行的列只会根据自己行内的内容计算宽度，自然没法做到垂直列统一。
• Grid方案里你把每个<li>当成了grid容器，而且用了固定百分比的minmax，这就导致列宽没法完全跟着内容走。

其实只需要把整个<ul>作为单个grid容器，就能完美解决问题！这样所有的单元格都属于同一个grid，列宽会自动取该列所有元素中最宽的那个作为宽度，完全符合你的需求。

实现代码 #

ul {
  display: grid;
  /* 固定3列，每列宽度由该列最宽元素决定 */
  grid-template-columns: max-content max-content max-content;
  gap: 4px; /* 替代margin，更简洁的间距控制 */
  border: 1px solid #000;
  padding: 2px;
}

ul li {
  display: contents; /* 让li的子元素直接成为grid的子项，忽略li本身 */
}

ul li div {
  border: 1px solid #000;
  padding: 2px;
}

<ul>
  <li>
    <div>First column</div>
    <div>Second column</div>
    <div>Third column</div>
  </li>
  <li>
    <div>Data with length.......</div>
    <div>Data with length..</div>
    <div>Data with length....</div>
  </li>
  <li>
    <div>Data with length...</div>
    <div>Data with length...</div>
    <div>Data with length....</div>
  </li>
  <li>
    <div>Data with length..</div>
    <div>Data with length.......</div>
    <div>Data with length.....</div>
  </li>
</ul>

关键要点解释 #

• display: grid 作用在整个<ul>上，让所有子元素（通过display: contents让div直接成为grid项）共享同一个grid布局。
• grid-template-columns: max-content max-content max-content：直接指定每列宽度为该列内容的最大宽度，完美适配你要的“列宽由最宽元素决定”的需求。
• display: contents 用来“穿透”<li>，让它的子div直接成为grid的单元格，这样每行的三个div会自动对应到grid的三列里，保证垂直列的对齐和宽度统一。

这个方案完全不需要手动设置宽度，就能实现你要的垂直列宽度统一、自动适配内容、最小宽度为列内最宽元素宽度的效果～

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