html - CSS网格网格列跨度问题

Question

我正在研究网格列的跨度大小。

我的网格列有这个代码：

.main_comp:nth-child(n+3) {
  //background-color: yellow;
  grid-template-columns: repeat(6, 1fr);
}

.main_comp:nth-child(n+3) .bigimg {
  grid-row: 1;
  grid-column: auto / span 3;
}

.main_comp:nth-childn+(n+3) .blog_art {
  grid-row: 2;
  grid-column: auto / span 2;
  background-color: green;
}

我得到的结果并不是我想要的。我以为：

grid-column: auto / span 2;

将跨越每个 blogart div 2 列，三个 blogart div 将跨越所有 6 列。

对于第三个及以后的所有 div，我想要的是这样的：

我在我的示例中设置了一个 codepen，我在这里提到的问题从第 66 行开始。

Answer 1

要达到预期结果，请使用以下选项

将以下类添加到 blog_art

<div class="main_comp">
      <div class="bigimg">image</div>
      <div class="bigimg">image</div>
      <div class="blog_art new">blog art</div>    
      <div class="blog_art new">blog art</div>
      <div class="blog_art new">blog art</div>     
    </div>

.new:not(:nth-child(2)) {
  grid-column: auto / span 2;
  grid-row: 2;
  background: orange;

}

Codepen 网址：http ://codepen.io/nagasai/pen/NjNaPX?editors=1100

Answer 2

你需要跨越 2 列。（编辑与 Naga Sai A 类似的答案，但使用不同的方法/选择器）

您可以通过以下方式覆盖您之前的规则.blog_art:not(:nth-child(2)) ：

.bigimg  + .bigimg ~ .blog_art { 
  grid-column: auto / span 2;
  background: tomato;/* see us */
}

http://codepen.io/gc-nomade/pen/KmzXgx?editors=1100#0