如何用CSS实现网格行高不低于宽度1/3且适配单元格内容？

需求说明 #

我需要构建一个网格布局，满足以下要求：

• 每行固定显示3个单元格
• 行高自动适配该行中内容最高的单元格
• 行高不得低于网格宽度的1/3（确保单元格为正方形或竖版，禁止出现横版单元格）

原本认为纯CSS就能实现，但暂时没找到可行方案，想确认这个需求是否能用纯CSS完成？目前备选思路是通过ResizeObserver获取容器宽度，传入自定义CSS变量来控制行高。

现有代码 #

HTML #

<div class="grid">
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>

  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
  <div class="cell">...arbitrary content...</div>
</div>

CSS #

.grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr; /* 期望实现类似 minmax(container-width / 3, 1fr) 的效果 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  overflow: hidden;
}

解决方案 #

方案一：纯CSS实现（现代浏览器兼容） #

可以利用minmax()、calc()和aspect-ratio属性组合实现，核心是计算出单元格的最小正方形高度，同时让行高随内容自动扩展：

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 计算最小行高：容器可用宽度（总宽度减去2个横向gap）除以3，得到正方形高度 */
  --min-row-height: calc((100% - 2 * 20px) / 3);
  /* 行高最小为计算值，内容超出时自动增高 */
  grid-auto-rows: minmax(var(--min-row-height), auto);
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  overflow: hidden;
  /* 确保单元格本身至少为正方形，配合行高的minmax限制 */
  min-height: 100%;
  aspect-ratio: 1 / 1;
}

说明：

• calc((100% - 2 * 20px) / 3) 是关键：因为每行3列，横向有2个gap，所以用容器总宽度减去gap总和后除以3，得到单个单元格的最小宽度（即正方形的高度）
• grid-auto-rows: minmax(...) 保证行高不会低于计算的最小高度，同时内容较多时自动撑开
• aspect-ratio: 1/1 强制单元格最小为正方形，即使内容极少也不会变成横版

方案二：ResizeObserver辅助实现（兼容老旧浏览器） #

如果需要兼容不支持aspect-ratio的浏览器，或者纯CSS方案存在边缘场景问题，可以用ResizeObserver监听容器宽度变化，动态计算最小行高：

JS代码

const gridContainer = document.querySelector('.grid');
const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const containerWidth = entry.contentRect.width;
    // 计算最小行高，逻辑和纯CSS一致
    const minHeight = (containerWidth - 2 * 20) / 3;
    gridContainer.style.setProperty('--min-row-height', `${minHeight}px`);
  });
});

observer.observe(gridContainer);

修改后的CSS

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 使用自定义变量控制最小行高，默认值为0 */
  grid-auto-rows: minmax(var(--min-row-height, 0), auto);
}

.cell {
  background-color: lightblue;
  border-radius: 40px;
  overflow: hidden;
  min-height: 100%;
}

说明：

• 通过ResizeObserver实时获取容器宽度，精确计算最小行高并传入CSS变量
• 兼容性更好，能适配所有容器宽度变化的场景（比如窗口缩放、父容器尺寸变化）

总结 #

纯CSS方案可以满足需求，适合现代浏览器环境；如果需要兼容老旧浏览器或更精确的控制，ResizeObserver辅助的方案更稳妥。

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