CSS Grid 布局与 nth-child

Question

我将创建一个具有动态图像数量的布局，全部通过css-grid实现，但是我有一个问题，我希望前10张图片具有创意设计，而后面的图片则按网格顺序排列。

从第11张开始，它们会在网格中找到空间插入。 我附上一个参考图像和此jsfiddle链接，其中包含我的代码示例。

请帮忙检查一下，提前致谢。

可能错误就在这里。

#container .mix:nth-child(n+11){
 grid-column-start: 1;
 grid-row-start: 43;
 grid-column: span 4;
 grid-row: span 2;
}

reference image

#container {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }

  #container .mix:nth-child(1){
    grid-column: 7 / span 9;
    grid-row: 1 / span 8;
  }

  #container .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  #container .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  #container .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  #container .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  #container .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  #container .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  #container .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  #container .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }

  #container .mix:nth-child(n+11){
    grid-column-start: 1;
    grid-row-start: 43;
    grid-column: span 4;
    grid-row: span 2;
  }

<div id="container">
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    
    <!-- end top 10 images -->
    
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    
    
</div><!-- end container -->

- Blomat

Answer 1

问题在于前10个子元素之间的间隙足够大，以至于后面的子元素可以填充它们。所以只要你想保留这么多的空间，你就无法通过一个容器来实现你想要的效果（只要图片数量是动态的）。

由于第一部分有固定数量的子元素，最好将其分为两个容器：一个用于第一组图片，另一个用于剩下的图片。 请查看下面的代码。虽然你上面的宽度基本上是动态的，而图片的大小是固定的。所以除非你使图片大小动态或者容器宽度固定，否则你无法在第二个容器中每行显示3个项目。

.creative {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }
 
 .ordered {
  display: flex;
 flex-wrap: wrap;
  }

  .creative .mix:nth-child(1){
    grid-column: 1 / span 9;
    grid-row: 1 / span 8;
  }

  .creative .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  .creative .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  .creative .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  .creative .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  .creative .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  .creative .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  .creative .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  .creative .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }

<div class="container creative">
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
</div>
   
    <!-- end top 10 images -->
<div class="container ordered">  
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    
    
</div><!-- end container -->

- Th3S4mur41

---

好的，如果唯一的解决方案是拥有两个不同的容器，那么我可能需要通过JavaScript将图像移动到一个新的容器中，以实现一切的动态性...我现在尝试一下！ - undefined

Answer 2

我同意Michaël Vanderheyden的观点。我进行了几次网格测试，我认为按照图像中所示的有序方式将新元素放置在一个新的网格中更可行。作为建议，我知道目标是使用display: grid，但如果您使用CSS框架，您可以使用新的可能性和更大的便利性。我知道已经有人提过这个建议，但您可以标准化网格的行为，甚至可以通过使用框架（HTML-css-JS）访问内部元素的更多行为选项。我不知道需求的具体情况，但我认为这个建议是有效的。祝您好运。

- qleoz12