如何在CSS Grid中将列宽设置为内容宽度？

我有一个列表，希望将其放置在两行中，目前使用CSS Grid实现的代码如下：

当前代码 #

CSS #

li:nth-of-type(2n) {
  grid-row-start: 2;
}

li:nth-of-type(2n + 1) {
  grid-row-start: 1;
}

HTML #

<ul>
<li>Item</li>
<li>Item</li>
<li>Item1111</li>
<li>content content</li>
</ul>

当前效果 #

期望效果 #

请问这个效果是否可以实现？

当然可以实现，只需给<ul>容器补充Grid属性，让列宽度适配内容即可，提供两种方案供你选择：

方案一：灵活自适应两行（元素自动填充） #

这种方案会让元素按列方向排列，填满一行后自动换行到第二行，每个单元格宽度完全匹配内容：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, min-content);
  grid-auto-flow: column;
  gap: 8px; /* 可选，添加元素间的间距 */
}

方案二：强制固定两行 #

如果需要严格保持两行布局（即使元素数量变化也维持两行结构），可以结合grid-auto-flow: dense自动填充空白单元格：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
  grid-template-rows: auto auto;
  grid-auto-flow: dense;
  gap: 8px;
}

li:nth-of-type(2n + 1) {
  grid-row: 1;
}

li:nth-of-type(2n) {
  grid-row: 2;
}

两种方案都能实现你要的“单元格宽度适配内容”的效果，可根据实际需求选择。

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