css网格栅格跨度问题

我需要网格列跨度大小的帮助。css网格栅格跨度问题

我有我的网柱验证码：

.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 div栏和三个博客div将跨越所有6列。

我想什么是这样对所有的div来自NR三起：

我已经建立了codepen上my example和问题，我在这里提到的上线66

开始-Thanks

来源

2017-04-20 user2371684

你有6列和使用'网格列：自动/跨度1;'。使用'auto/span 2'，它会传播。如果它打破了其他任何情况，请相应地指定这些情况作为一般观察，你在滥用'：nth-child（）'。它很慢并且不可靠（很容易中断，特别是在当今的网络中，几乎每个小插件都可以在飞行中操作DOM）。你对班级更安全。还要尽量避免'：not（）'。这是非常低效（缓慢）。 –

感谢您对第n个孩子的建议 – user2371684

你需要跨越2周的cols。 （编辑类似的答案，那加赛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

来源

2017-04-20 21:27:44

谢谢，我会阅读代码 – user2371684

实现电子xpected结果，请使用下列选项

下方添加类的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

来源

2017-04-20 21:19:56

css网格栅格跨度问题

回答

相关问题