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设置了一个codepen，我在这里提到的问题从第66行开始

-Thanks

Answer 1

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

将以下课程添加到blog_art

Dictionary<Key, Value> B = {name, "valueb"; last, "smith"}
Dictionary<Key, Value> A = {name, "valuea"; last, "smith"; middle, "m"}

if (name == name) 
{
 if("valueb" == "valuea" )
{
 return false;
}
}

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

css grid grid-column span issue

2 个答案: