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

Question

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

​

​

正如你在下面的片段中所看到的，除了第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图片，它将工作。在代码页中，您可以看到处理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>

​