如何用CSS columns根据子元素max-content动态分栏并实现等宽

我尝试使用CSS columns 属性，想要达成两个目标：

• 根据子元素完整显示（文本尽可能不换行）所需的最大宽度，动态确定分栏数量
• 每个子元素能拉伸填充所在列的可用空间

当前效果 #

子元素宽度随内容自适应，列宽不一致，布局错落：

期望效果 #

所有子元素宽度完全相等，均匀填充父容器空间：

尝试的代码 #

HTML

<div class="columns">
  <div>
    Lorem
  </div>
  <div>
     Ipsum
  </div>
  <div>
    Dollar
  </div>
  <div>
    Euro
  </div>
  <div>
    Bitcoin
  </div> 
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.columns {
  columns: auto;
  column-gap: 1rem;
  background: #4cafff;
  padding: 1rem 0;
}

.columns > div {
  width: max-content;
  background: #4caf50;
  color: white;
  font-size: 2rem;
  border: 2px solid green;
  margin: 1rem;
}

解决方案：改用CSS Grid（推荐） #

原生columns属性是为文本流式分栏设计的，不适合这种独立块级元素的等宽布局。CSS Grid能完美满足需求，通过repeat(auto-fit, minmax(...))语法实现动态列数+等宽填充：

修改后的CSS：

* {
  padding: 0;
  margin: 0;
}

.columns {
  display: grid;
  /* 自动适配列数：每列最小宽度为子元素内容宽度，多余空间自动平分 */
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
  gap: 1rem;
  background: #4cafff;
  padding: 1rem;
}

.columns > div {
  background: #4caf50;
  color: white;
  font-size: 2rem;
  border: 2px solid green;
  padding: 0.5rem; /* 可选优化，提升内容展示效果 */
}

备选方案：Flexbox实现 #

如果更偏好Flexbox，也可以通过flex: 1 1 max-content实现类似效果：

* {
  padding: 0;
  margin: 0;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: #4cafff;
  padding: 1rem;
}

.columns > div {
  flex: 1 1 max-content; /* 基础宽度为内容宽度，允许拉伸/收缩以填充空间 */
  background: #4caf50;
  color: white;
  font-size: 2rem;
  border: 2px solid green;
  padding: 0.5rem;
}

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