如何让CSS columns多列布局靠左聚拢而非均匀分散排布

问题核心原因 #

CSS原生columns/column-width属性设置的是最小列宽，并非固定列宽。当多列容器为默认块级元素、宽度占满父容器整行时，浏览器会自动等比拉伸列宽，让所有列加列间隙刚好填满容器的完整宽度，最终呈现列均匀分散、空隙过大的效果。

实现方案 #

仅需修改多列容器.cols的样式，新增3个属性即可，完全保留「先排满第一列再流入下一列」的原生多列排布逻辑，无需JavaScript：

.cols {
  columns: 250px;
  /* 新增核心样式 */
  column-gap: 10px; /* 列间隙与子元素宽度匹配：240px子元素宽度 + 10px间隙 = 250px单列宽度 */
  width: max-content; /* 让容器宽度收缩到内容实际占用宽度，不再默认撑满整行 */
  max-width: 100%; /* 响应式兜底，小屏幕下避免内容溢出 */
}

方案原理 #

1. width: max-content会让容器宽度根据内部多列内容的实际宽度收缩，从根源上消除了浏览器可用来拉伸列宽的多余空间，列宽会严格保持你设置的250px，不会被自动放大。
2. 显式设置column-gap可以避免浏览器使用默认列间隙值导致的列宽计算偏差。
3. max-width: 100%做响应式兼容：当父容器宽度小于多列内容总宽度时，容器会自动占满父容器宽度，正常触发列数自动减少的逻辑，不会出现横向滚动条。

效果对比 #

• 默认效果（列均匀分散占满容器）：
  
• 调整后效果（列整体靠左聚拢）：
  

无效方案说明 #

之前尝试的方案不生效的原因如下：

• 单独设置column-width: 250px：和columns: 250px逻辑完全一致，仅定义最小列宽，容器撑满时列依然会被拉伸。
• 给容器设置display: inline-block：inline-block的收缩宽度计算逻辑在多列场景下会优先取父容器可用宽度，不会收缩到内容实际宽度，列依然会被拉伸。
• 给容器设置margin: 0 auto 0 0：仅调整外边距对齐方式，容器本身宽度依然撑满整行，没有解决列被拉伸的根本问题。
• 单独设置column-gap: 10px：仅修改列间隙大小，容器宽度依然占满整行，列宽拉伸问题依然存在。
• display: flex; flex-direction: column; flex-wrap: wrap：必须给容器设置固定高度才能触发列换行，和原生columns自动根据列数适配容器高度的逻辑不一致，不符合需求。

完整可运行代码 #

body {
  background-color: #c3dbff;
}
.cols {
  columns: 250px;
  column-gap: 10px;
  width: max-content;
  max-width: 100%;
}
.thing {
  width: 240px;
  background: red;
  margin-bottom: 10px;
  break-inside: avoid-column;
  /* 以下为演示用样式，不影响布局逻辑 */
  color: white;
  display: inline-grid;
  place-content: center;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 50pt;
}

<div class="cols">
  <div class="thing" style="height: 200px;">1</div>
  <div class="thing" style="height: 200px;">2</div>
  <div class="thing" style="height: 290px;">3</div>
  <div class="thing" style="height: 280px;">4</div>
  <div class="thing" style="height: 200px;">5</div>
  <div class="thing" style="height: 230px;">6</div>
  <div class="thing" style="height: 260px;">7</div>
  <div class="thing" style="height: 210px;">8</div>
  <div class="thing" style="height: 280px;">9</div>
  <div class="thing" style="height: 230px;">10</div>
  <div class="thing" style="height: 260px;">11</div>
  <div class="thing" style="height: 210px;">12</div>
  <div class="thing" style="height: 200px;">13</div>
  <div class="thing" style="height: 270px;">14</div>
  <div class="thing" style="height: 220px;">15</div>
  <div class="thing" style="height: 260px;">16</div>
  <div class="thing" style="height: 250px;">17</div>
  <div class="thing" style="height: 290px;">18</div>
</div>

该方案完全符合需求：不是瀑布流布局，元素始终优先沿第一列向下排列，填满后再流入下一列，无JS依赖。

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