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，我想要的是这样的:

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

Answer 1

您需要跨越 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