CSS Grid实现正方形单元格：列宽自适应行高，适配父容器高度

需求说明 #

需要创建一个3行4列的响应式CSS Grid布局，满足以下要求：

• 网格完全撑满父容器高度（例如父容器设为100vh）
• 3行高度自动均分父容器空间
• 自动生成4列，所有单元格保持1:1的正方形比例
• 列宽由行高决定（即宽度适配高度，而非高度适配宽度）

当前尝试方案 #

在网格容器上设置：

grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;

同时为单元格添加：

aspect-ratio: 1 / 1;

遇到的问题 #

设置aspect-ratio: 1 / 1后，单元格会优先适配宽度来调整高度，导致整个网格超出父容器范围，无法实现「宽度适应高度」的预期效果。

当前效果截图 #

预期效果截图 #

解决方法 #

核心思路是先固定单元格的高度（由网格行高决定），再通过aspect-ratio让宽度自动匹配高度，同时限制列宽避免网格溢出。

完整代码实现 #

/* 父容器：设置高度并清除默认边距 */
.parent {
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* 网格容器：固定行高，按列自动排列，列宽由单元格宽度决定 */
.grid-container {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* 3行均分父容器高度 */
  grid-auto-flow: column; /* 按列方向自动生成4列 */
  grid-auto-columns: min-content; /* 列宽适配单元格实际宽度 */
  gap: 8px; /* 可选：添加单元格间距 */
}

/* 单元格：占满行高，自动生成正方形宽度 */
.grid-item {
  height: 100%; /* 完全填充所在行的高度 */
  aspect-ratio: 1/1; /* 宽度自动等于高度，形成正方形 */
  background-color: #e0e0e0; /* 示例背景色，可替换 */
}

原理说明 #

1. 网格容器的grid-template-rows: repeat(3, 1fr)让3行均分父容器高度，每行高度固定为父容器高度的1/3。
2. grid-auto-flow: column让元素按列方向排列，自动生成4列。
3. grid-auto-columns: min-content确保列宽仅适配单元格的实际宽度，不会强制拉伸导致溢出。
4. 单元格的height: 100%占满所在行的固定高度，aspect-ratio:1/1会自动计算出与高度相等的宽度，最终形成完美正方形。

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