本文介绍如何使用 CSS aspect-ratio、grid-auto-rows 和容器级约束，构建一个最大高度不超过视口高度（100vh）的响应式正方形网格（如 3×3 或 5×5），确保每个格子始终为完美正方形且整体布局随窗口缩放自适应。
本文介绍如何使用 css `aspect-ratio`、`grid-auto-rows` 和容器级约束，构建一个最大高度不超过视口高度（`100vh`）的响应式正方形网格（如 3×3 或 5×5），确保每个格子始终为完美正方形且整体布局随窗口缩放自适应。
要实现“填满但不溢出视口”的正方形网格，关键在于将尺寸控制逻辑从单个 .square 元素上移至容器 .square-container。若直接对 .square 设置 max-height 或 min-height，由于 aspect-ratio: 1/1 仅保证宽高比，其实际尺寸仍由父容器决定——而默认 Grid 行高是内容驱动的，无法自动均分容器空间。
正确解法是：让容器自身成为具有固定宽高比的弹性盒子，并强制其子项铺满可用空间。
首先，为 .square-container 设置 aspect-ratio: 1，使其保持正方形比例；再通过 grid-auto-rows: 1fr 配合 grid-template-columns: repeat(N, 1fr)，使所有行列均等分容器空间。此时，每个 .square 只需设置 width: 100%; height: 100% 即可完美贴合对应网格单元：
.square-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 改为 repeat(5, 1fr) 即可切换为 5×5 */
grid-auto-rows: 1fr;
gap: 10px;
aspect-ratio: 1; /* 容器整体为正方形 */
max-width: 100%;
max-height: 100vh; /* 核心：限制容器最大高度为视口高度 */
margin: auto; /* 水平居中，避免右侧溢出 */
}
.square {
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
height: 100%;
box-sizing: border-box; /* 确保边框不破坏尺寸计算 */
}
/* 重置默认 body 边距，避免滚动条干扰 */
body {
margin: 0;
}
该方案天然响应式：当窗口变窄时，max-height: 100vh 成为瓶颈，容器高度被压缩，aspect-ratio: 1 自动同步缩小宽度，1fr 均分机制则保证每个正方形按比例缩放。你甚至可通过媒体查询动态切换列数：
@media (min-width: 768px) {
.square-container {
grid-template-columns: repeat(5, 1fr);
}
}
⚠️ 注意事项：
- aspect-ratio 在现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）中已广泛支持；如需兼容旧版 IE，需降级为 JS 计算或 padding-top 技巧；
- 避免在 .square 上设置 min-height/max-height，这会破坏 height: 100% 的继承链；
- 若网格内含文字内容，建议添加 display: flex; align-items: center; justify-content: center; 到 .square 中以垂直水平居中文本。
总结：正方形网格的响应式控制应“自上而下”——由容器定义总体比例与边界，子项专注填充。这一思路同样适用于 4×4、6×6 等任意阶数网格，只需调整 repeat() 参数并确保行列数一致即可。
