使用CSS Grid实现列高一致与图片适配，含16:9比例需求

问题描述 #

尝试创建CSS Grid布局，要求保持各列高度一致，同时第一个项目需维持16:9的宽高比。但当前图片无法完全适配容器，存在几像素的偏差。请问是否可以通过Grid实现该需求，还是必须使用Flexbox？

当前实现代码：

CSS 代码 #

.container {
  width: 480px;
  max-width: 480px;
  height: 480px;
  max-height: 480px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-gap: 0.375rem;
}

.item:nth-child(1) {
  aspect-ratio: 16 / 9;
  grid-column: span 3;
}

.item:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

.item:nth-child(3) {
  aspect-ratio: 4 / 3;
  grid-column: span 3;
  grid-row: auto;
}

.item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

HTML 代码 #

<div class="container">
  <div class="grid">
    <div class="item"><img src="https://picsum.photos/1280/720" alt="" srcset="" /></div>
    <div class="item"><img src="https://picsum.photos/300/600" alt="" srcset="" /></div>
    <div class="item"><img src="https://picsum.photos/480/320" alt="" srcset="" /></div>
  </div>
</div>

解决方案：用Grid完全可以实现，无需Flexbox #

问题出在细节的布局控制上，调整后就能让图片完美适配容器，同时保证列高一致：

1. 给.item设置相对定位，图片改用绝对定位
   彻底消除height: auto带来的像素偏差，让图片完全填充容器。
2. 明确Grid的行高规则
   通过grid-template-rows定义等高行，确保列高度对齐。
3. 强制图片占满容器
   图片设置width: 100%; height: 100%，配合object-fit: cover保证适配效果。

修改后的代码：

优化后的CSS #

.container {
  width: 480px;
  max-width: 480px;
  height: 480px;
  max-height: 480px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr); /* 定义两行等高 */
  grid-gap: 0.375rem;
  height: 100%; /* 让网格充满容器高度 */
}

.item {
  position: relative; /* 为图片绝对定位提供参照 */
  overflow: hidden; /* 隐藏图片溢出部分 */
}

.item:nth-child(1) {
  aspect-ratio: 16 / 9;
  grid-column: span 3;
  grid-row: span 1; /* 明确跨1行 */
}

.item:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

.item:nth-child(3) {
  aspect-ratio: 4 / 3;
  grid-column: span 3;
  grid-row: span 1; /* 明确跨1行 */
}

.item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键说明 #

• grid-template-rows: repeat(2, 1fr)让网格两行高度均分，直接保证列高一致。
• 图片绝对定位后完全贴合.item容器，解决了原代码中因height: auto导致的像素偏差。
• aspect-ratio依然能维持指定项目的宽高比，同时Grid的行列跨度确保整体布局对齐。

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