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の3はすべて6列の上にまたがるう：私はと思いました。私はセットアップmy exampleにcodepen、問題は、私がここで言及しているがあり

：私が望む何

以降3、NRからのすべてのdivのためにこのようなものです66行目から始まる

-thanks

Answer 1

あなたは2つのCOLSにまたがるする必要があります。 `あなたが6列と使用を持っている

.bigimg + .bigimg ~ .blog_art { 
    grid-column: auto/span 2; 
    background: tomato;/* see us */ 
} 

http://codepen.io/gc-nomade/pen/KmzXgx?editors=1100#0

Answer 2

達成するには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のURLを追加します：http://codepen.io/nagasai/pen/NjNaPX?editors=1100