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;

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

我想要的是从第三个开始的所有 divs:

我在 my example 上设置了一个代码笔，我在这里提到的问题从第 66 行开始。

Answer 1

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

将下面的 class 添加到 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 URL: http://codepen.io/nagasai/pen/NjNaPX?editors=1100

Answer 2

您需要跨越 2 列。 （编辑与 Naga Sai A 相似的答案，但 approach/selector）

您可以通过以下方式覆盖您之前的规则 .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

CSS 网格网格列跨度问题

CSS grid grid-column span issue

html

css

css-grid