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網格柵格跨度問題

回答

相關問題