如何用CSS/JS实现动态容器与3:4比例自适应子元素布局？

需求说明 #

• 容器采用flex/grid布局，包含若干子元素
• 子元素尺寸统一，均匀分布并最大化填充容器空间
• 子元素严格保持3:4宽高比
• 容器宽高、子元素数量均为动态值，子元素尺寸需自动适配

现有方案需手动修改grid-template-columns，无法应对动态变化场景。

示例效果：

• 550×260px容器含2个子元素：
• 550×260px容器含20个子元素：

解决方案：CSS Grid + JS动态计算最优列数 #

通过JS自动计算适配容器尺寸和子元素数量的最优列数，结合CSS Grid实现完全自适应，无需手动调整布局参数。

代码实现 #

CSS部分

.container {
  display: grid;
  gap: 8px; /* 自定义子元素间距 */
  padding: 8px;
  width: 100%; /* 可替换为固定值或其他动态宽度 */
  height: 260px; /* 动态高度，示例值 */
  /* 通过CSS变量接收JS计算的列数 */
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

.item {
  aspect-ratio: 3/4; /* 强制3:4宽高比 */
  background-color: #e0e0e0;
}

JavaScript部分

function calculateOptimalCols() {
  const container = document.querySelector('.container');
  const itemCount = container.children.length;
  if (itemCount === 0) return;

  const { clientWidth: containerW, clientHeight: containerH } = container;
  const gap = parseInt(getComputedStyle(container).gap);
  let bestCols = 1;
  let maxUsableSize = 0;

  // 遍历可能的列数，找到空间利用率最高的最优解
  for (let cols = 1; cols <= itemCount; cols++) {
    const rows = Math.ceil(itemCount / cols);
    // 计算当前列数下，容器宽度能容纳的子元素最大宽度
    const widthByContainerW = (containerW - gap * (cols - 1)) / cols;
    // 计算当前列数下，容器高度能容纳的子元素最大高度，转换为对应宽度（3:4比例）
    const widthByContainerH = ((containerH - gap * (rows - 1)) / rows) * 3 / 4;
    // 取较小值确保子元素不溢出容器
    const usableWidth = Math.min(widthByContainerW, widthByContainerH);
    const usableSize = usableWidth * usableWidth; // 用面积衡量空间利用率

    if (usableSize > maxUsableSize) {
      maxUsableSize = usableSize;
      bestCols = cols;
    }
  }

  container.style.setProperty('--cols', bestCols);
}

// 初始化布局
calculateOptimalCols();

// 监听容器尺寸变化自动更新
new ResizeObserver(calculateOptimalCols).observe(document.querySelector('.container'));

// 动态添加/删除子元素后，调用calculateOptimalCols更新布局

方案优势 #

1. 完全自动适配：容器尺寸、子元素数量变化时自动重新计算布局
2. 严格保持比例：通过aspect-ratio确保子元素始终为3:4
3. 最大化空间利用：遍历所有可能列数，选择空间利用率最高的布局

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