如何修复这个基于 4 列的复杂 CSS 网格照片？

Question

我设计了这个 1-4 / 4-1 / 1 网格并尝试使用基于 4 列的完整 CSS 网格解决方案来实现它：

正如你在下面的sn-p中看到的，它几乎在那里，除了第4和第5以及第8和第9张照片需要在其他小图像下。我尝试使用网格模板行，但它变得非常棘手并且很快就变得混乱。
网格图案将从第 12 个元素开始重复。

.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;
}

/* 1st photo = 2 columns, 2 first rows */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
}


/* 2nd photo and other small ones */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
}

/* 11th photo = 2 columns */
.photo:nth-of-type(11n+10) {
  grid-column: 3 / span 2;
}

/* 11th photo = 4 columns */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
}

<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>

Answer 1

你可以像下面这样简化你的代码：

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

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

.photo:nth-child(11n + 1){
  grid-area:span 2/span 2;
}
.photo:nth-child(11n + 10) {
  grid-area:3/3/span 2/span 2
}
.photo:nth-child(11n + 11){
  grid-column:span 4;
  margin-top:10px;
}

.photo:nth-child(11n + 1),
.photo:nth-child(11n + 4),
.photo:nth-child(11n + 5){
  margin-bottom:10px;
}

<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>

Answer 2

我修复了你的 CSS。您现在还可以拥有 n*11 图像，它会工作。 在 codepen 中，您会看到使用 22 张图片的代码：https://codepen.io/yourbraineatsyou/pen/xxroWWg

.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;
}

/* 1st photo = 2 columns, 2 first rows */
.photo:nth-of-type(11n+1) {
  grid-column: 1 / span 2;
  grid-row: span 2;
}

/* 9th photo = 2 columns, last rows */
.photo:nth-of-type(11n+8) {
  grid-column: 3 / span 2;
  grid-row: span 2;
}

/* 11th photo = 4 columns */
.photo:nth-of-type(11n) {
  grid-column: 1 / span 4;
}

<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>