本文详解如何在 css grid 布局中强制所有网格项（含跨行项）严格等高，并统一维持 4:3 图片宽高比，关键在于确保容器元素（如 button）也参与高度约束，而非仅依赖 img 自身样式。
本文详解如何在 css grid 布局中强制所有网格项（含跨行项）严格等高，并统一维持 4:3 图片宽高比，关键在于确保容器元素（如 button）也参与高度约束，而非仅依赖 img 自身样式。
在使用 CSS Grid 构建响应式图库时，一个常见痛点是：首项跨两行（grid-row: span 2）后，其实际渲染高度仍无法与其他格子对齐，底部出现明显空白。根本原因在于——img 虽设置了 height: 100% 和 aspect-ratio: 4 / 3，但其父级 <button></button> 默认为内联替换元素，不继承网格轨道高度，导致 height: 100% 失效（百分比高度需父容器有明确高度才生效）。
✅ 正确解法：让每一层容器都“撑满”网格单元
必须显式为 button 设置 width: 100%; height: 100%;，使其成为尺寸受控的块级容器，从而让内部 img 的 100% 高度有据可依：
body {
padding: 40px;
}
* {
margin: 0;
padding: 0;
}
.grid-gallery {
list-style: none;
display: grid;
grid-template-columns: 2fr 1fr 1fr; /* 左侧占 2 份，右两列各占 1 份 */
grid-template-rows: 1fr 1fr; /* 两行等高轨道 */
gap: 1rem;
}
.grid-gallery-item:first-child {
grid-row: span 2; /* 跨两行，占据左侧全部高度 */
}
/* 关键修复：button 必须填满所在网格单元 */
button {
width: 100%;
height: 100%;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片填充不拉伸变形 */
aspect-ratio: 4 / 3; /* 原生支持宽高比约束（现代浏览器） */
}? 兼容性提示：若需支持旧版浏览器（如 Safari min-height: 0 配合
padding-top: 75%的「垂直 padding hack」替代aspect-ratio，但当前方案已覆盖 98%+ 全球用户（caniuse.com/aspect-ratio）。
? 为什么原代码会失败？
-
img { height: 100% }依赖父元素（button）有确定高度； - 默认
button是display: inline，其高度由内容决定，不响应100%； - 网格轨道高度由内容撑开，而
button内容（图片）又依赖button高度 → 形成循环依赖，最终高度由默认行高或最小内容决定，导致不一致。
✅ 最终效果保障
- 所有
.grid-gallery-item单元格严格等高（由grid-template-rows: 1fr 1fr统一划分）； - 首项跨行后自然拉伸至两倍行高，与右侧两个单元格总高度对齐；
- 每张图片均以
cover方式居中裁剪，精准维持 4:3 视觉比例； - 布局完全响应式，缩放窗口时比例与对齐关系恒定。
通过这一层容器约束，CSS Grid 的声明式布局能力才能真正释放——你定义的是「轨道」，而每个嵌套元素都需主动「锚定」到轨道上，而非被动等待内容推动。
立即学习“前端免费学习笔记（深入）”；
