CSS Grid如何实现列优先填充的水平自适应网格布局

核心逻辑 #

完全匹配需求的布局计算逻辑分两步：

• 先根据容器宽度、单元格最小宽度，计算当前宽度下一行最多可容纳的列数，换行阈值和普通row wrap布局完全一致
• 再根据总单元格数、算出的列数推导需要的固定行数，按列从上到下、从左到右填充内容

完整实现代码 #

HTML结构 #

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
</div>

CSS样式 #

.grid-container {
  width: 100%;
  display: grid;
  gap: 8px; /* 单元格间距，可按需调整 */
  grid-auto-flow: column; /* 开启列优先填充模式 */
}
.grid-item {
  min-width: 120px; /* 单元格最小宽度，可按需调整 */
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

JS逻辑（负责动态计算行列数） #

const container = document.querySelector('.grid-container');
const items = container.querySelectorAll('.grid-item');
// 配置项：和CSS中设置的参数保持一致
const ITEM_MIN_WIDTH = 120;
const GAP = 8;

const updateLayout = () => {
  const containerWidth = container.clientWidth;
  // 计算当前宽度下最多可容纳的列数，最小为1
  const columnCount = Math.max(
    1,
    Math.floor((containerWidth + GAP) / (ITEM_MIN_WIDTH + GAP))
  );
  // 计算对应需要的行数
  const rowCount = Math.ceil(items.length / columnCount);
  // 更新网格布局模板
  container.style.gridTemplateRows = `repeat(${rowCount}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${columnCount}, 1fr)`;
};

// 监听容器尺寸变化，自动更新布局
const resizeObserver = new ResizeObserver(updateLayout);
resizeObserver.observe(container);
// 初始化布局
updateLayout();

效果说明 #

代码运行后会完全匹配你给出的所有宽度下的视觉表现：

• 容器宽度足够放下7个单元格时，列数为7、行数为1，内容横向排列为1 2 3 4 5 6 7
• 容器缩至一行最多放4个单元格时，列数为4、行数为2，渲染结果为：

  |  1  |  3  |  5  |  7  |
  |  2  |  4  |  6  |
  

• 容器缩至一行最多放3个单元格时，列数为3、行数为3，渲染结果为：

  |   1  |   4  |   7  |
  |   2  |   5  |
  |   3  |   6  |
  

• 容器缩至一行最多放2个单元格时，列数为2、行数为4，渲染结果为：

  |    1   |    5   |
  |    2   |    6   |
  |    3   |    7   |
  |    4   |
  

注意事项 #

• 如果需要响应式修改单元格最小宽度，不需要硬编码参数，可以通过getComputedStyle读取单元格实际的min-width和gap值做计算即可
• 该方案用ResizeObserver监听容器本身的尺寸变化，不需要绑定window的resize事件，哪怕容器在弹性布局、网格布局中因其他元素影响尺寸变化，也能自动触发布局更新
• 目前纯CSS无法实现该逻辑，因为原生CSS网格的自动列数计算结果无法反向传递给行数配置，上述JS代码量极小，无性能负担，兼容所有现代浏览器，是生产环境可用的最优方案。

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