CSS 网格布局和 nth-child

Posted 2023-03-05

【中文标题】CSS 网格布局和 nth-child

【英文标题】：CSS Grid Layout and nth-child

【发布时间】：2019-06-11 23:59:48

【问题描述】：

我将通过 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 -->

【参考方案1】：

问题在于，前 10 个孩子之间的差距大到足以让后面的孩子填补它们。所以只要你想保留这么多的空间，你就无法用单个容器来实现你想要的（只要图像的数量是动态的。

因为第一部分有一个静态数量的孩子。最好将其拆分为 2 个容器：一个用于第一个图像，一个用于其余图像。 检查下面的代码。尽管您上面的宽度几乎是动态的，而图像具有静态尺寸。因此，除非您使图像大小动态或容器宽度静态。您不会在第二个容器中获得每行 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 -->

【讨论】：

好的，所以如果唯一的解决方案是拥有两个不同的容器，可能我必须通过 javascript 将图像移动到一个新容器中的第 10 位以上，以使一切动态......我现在试试！

【参考方案2】：

我同意 Michaël Vanderheyden 的观点，我对网格进行了多次测试，我认为与划分为一个新网格的方式相同，在该网格中，您将新元素按顺序放置在图像中更可行，作为建议，我知道目标是使用 display: grid，但是如果您使用 CSS 框架，您可以使用新的可能性和更好的设施，我知道有人已经建议过，但是您可以标准化您的网格的行为和甚至可以访问内部元素的更多行为选项，使用框架（html-css-JS），我不知道需求的情况，但我认为建议是有效的，祝你好运