如何修复基于4列实现的复杂CSS Grid图片网格布局

我设计了1-4 / 4-1 / 1形式的网格，尝试基于4列的纯CSS Grid方案实现它：

从下方代码片段可见布局已基本完成，仅第4、5张以及第8、9张图片需要排列在其他小图下方。我尝试调整grid-template-rows属性，但逻辑复杂极易导致布局混乱，该网格模式会从第12个元素开始循环重复。

原有代码 #

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 56px 40px;
  margin: 40px;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 第1张图占2列、前2行 */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
}

/* 重复的第1张图规则 */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
}

/* 第10张图占2列 */
.photo:nth-of-type(11n+10) {
  grid-column: 3 / span 2;
}

/* 第11张图占4列 */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
}

HTML

<div class="grid">
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
  <div class="photo">
    <img src="https://via.placeholder.com/800x533" width="800" height="533" alt="Photo">
  </div>
</div>

解决方案 #

调整CSS规则补充跨行设置和自动填充逻辑即可实现预期效果，修改后的完整CSS如下：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 56px 40px;
  margin: 40px;
  /* 自动填充网格空位 */
  grid-auto-flow: dense;
  /* 统一行高保证布局对齐 */
  grid-auto-rows: 1fr;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 第1张图：占左2列、跨2行 */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

/* 第6张图：占右2列、跨2行 */
.photo:nth-of-type(11n+6) {
  grid-column: 3 / span 2;
  grid-row: span 2;
}

/* 第10张图：占右2列 */
.photo:nth-of-type(11n+10) {
  grid-column: 3 / span 2;
}

/* 第11张图：占满4列通栏 */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
}

修改说明：

• 删除了重复的nth-of-type(11n+1)规则，避免样式冲突
• 给两个2列宽度的大图补充了grid-row: span 2，实现纵向跨两行的效果
• 新增grid-auto-flow: dense让网格自动填充空位，第4、5和8、9张小图会自动排布到空缺位置
• 新增grid-auto-rows: 1fr保证所有行高统一，避免图片高度不一致导致布局错位

HTML代码无需修改，替换CSS即可实现预期的循环网格效果。

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