无需手动调整HTML结构，如何实现Dense cluster布局？

我希望不用手动调整HTML源代码的顺序，实现密集簇布局——元素根据自身内容宽度自适应排列，自动填充上一行的空隙，形成紧凑的排版效果。

现有Flexbox实现（无法满足紧凑要求） #

下面是我用Flexbox写的示例，但它没办法自动填充行内空隙，达不到密集布局的效果：

CSS代码 #

ul {
  max-width: 20ch;
  display: flex;
  flex-flow: row wrap;
}

li {
  list-style: none;
  outline: 2px solid #eee;
  border-radius: 1px;
  padding: 0.15em 0.3em;
  margin: 0.2em;
}

HTML代码 #

<ul>
  <li>短文本</li>
  <li>稍长一点</li>
  <li>这个文本更长</li>
  <li>稍微短点</li>
  <li>超级长的文本内容</li>
  <li>很短</li>
  <li>有点长</li>
</ul>

Grid布局的尝试与疑问 #

我知道Grid布局可以用grid-auto-flow: row dense来填充空隙，但不知道怎么让元素按自身内容尺寸自适应（不是由网格规定固定尺寸），甚至不确定这种需求能不能实现。以下是我的Grid尝试代码：

CSS代码 #

ul {
  display: grid;
  grid-auto-flow: row dense;
}

li {
  list-style: none;
  width: fit-content;
  outline: 2px solid #eee;
  border-radius: 1px;
  padding: 0.15em 0.3em;
  margin: 0.2em;
}

HTML代码 #

<ul>
  <li>短文本</li>
  <li>稍长一点</li>
  <li>这个文本更长</li>
  <li>稍微短点</li>
  <li>超级长的文本内容</li>
  <li>很短</li>
  <li>有点长</li>
</ul>

解决方案 #

要实现这种自适应内容宽度的密集簇布局，只需要调整Grid的列配置即可，具体代码如下：

优化后的CSS代码 #

ul {
  max-width: 20ch;
  display: grid;
  /* 让列宽根据元素内容自动适配，同时自动生成足够的列 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  grid-auto-flow: row dense;
  /* 用gap替代margin，避免间距叠加，布局更规整 */
  gap: 0.4em;
}

li {
  list-style: none;
  outline: 2px solid #eee;
  border-radius: 1px;
  padding: 0.15em 0.3em;
}

关键说明 #

• grid-template-columns: repeat(auto-fit, minmax(min-content, max-content))：核心配置，让每一列宽度刚好适配元素内容的最小到最大宽度，auto-fit会根据容器宽度自动生成足够列数
• grid-auto-flow: row dense：开启密集排列，自动填充上一行留下的空隙，实现紧凑布局
• 使用gap代替margin：Grid的gap属性可统一控制元素间距，避免margin带来的间距叠加问题，布局更可控

这样就能在不调整HTML顺序的前提下，完美实现你想要的密集簇布局。

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