Question

我将通过css-grid创建具有动态图像数量的布局，但是我有一个问题，我希望前10张图像具有创造性的设计，而我以后的图像则需要他们在网格中订购。

从11开始，它们开始插入在网格中找到空间的位置。我附有参考图片和一个this 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 -->

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

Answer 2

我同意MichaëlVanderheyden所做的几次网格测试，并且我认为以同样的方式将其划分为一个新网格，在该网格中，您可以按照图像中的顺序有序地放置新元素，作为一项建议，我知道目标是使用display：grid，但是如果您使用CSS框架，则可以使用新的可能性和更多的功能，我知道有人已经建议过，但是您可以标准化网格的行为并甚至通过使用framworks（HTML-css-JS）来访问内部元素的更多行为选项，我不知道要求的具体情况，但我认为建议是有效的，祝您好运

CSS网格布局和第n个子元素

2 个答案: