使用grid-template-column实现不规则图片网格布局的问题求助

问题场景 #

我尝试将4张图片展示为不规则网格布局，已添加两个高度略小于图片的透明盒子（分别置于第一列开头和第二列末尾），但当前布局未达到预期效果，请求修复。

当前实现代码 #

CSS #

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto auto auto;
    gap: 1rem;
    justify-self: start;
  }
  
.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}

.transparent-box {
    width: 176px;
    height: 140px;
    background-color: rgba(0, 0, 0, 0.00);
    border-radius: 8px;
}

HTML #

<div class="image-grid">
  <div class="transparent-box"></div>
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
  <div class="transparent-box"></div>
</div>

修复方案 #

原问题在于网格行高自动计算、元素未指定网格位置，导致透明盒和图片无法按预期错位排列。以下是修改后的代码：

修改后的CSS #

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: 176px 176px; /* 固定列宽，匹配元素尺寸 */
    grid-template-rows: 140px 176px 140px; /* 第一/三行对应透明盒高度，中间行对应图片高度 */
    gap: 1rem;
    justify-self: start;
}

.image-grid img {
    width: 100%; /* 继承列宽，避免尺寸偏差 */
    height: 100%;
    object-fit: cover; /* 保持图片比例，防止拉伸变形 */
    border-radius: 8px;
}

.transparent-box {
    background-color: transparent; /* 简化透明写法 */
    border-radius: 8px;
}

/* 逐个指定元素的网格位置，实现错落效果 */
.transparent-box:first-child {
    grid-column: 1;
    grid-row: 1;
}

.image-grid img:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2; /* 跨第1、2行 */
}

.image-grid img:nth-child(3) {
    grid-column: 1;
    grid-row: 2 / span 2; /* 跨第2、3行 */
}

.image-grid img:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.image-grid img:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
}

.transparent-box:last-child {
    grid-column: 2;
    grid-row: 3;
}

修改后的HTML（结构无需调整） #

<div class="image-grid">
  <div class="transparent-box"></div>
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
  <div class="transparent-box"></div>
</div>

关键调整说明 #

• 固定网格的列宽和行高，消除自动布局的不确定性；
• 利用grid-row: x / span y让指定图片跨行，形成不规则的视觉错落；
• 图片改用width:100%配合object-fit:cover，保证在网格单元内正常显示，避免尺寸错位。

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