CSSグリッドテンプレート：セルのクラスに応じて列を塗りつぶす

Question

私は、セルを100％または50％幅にできる単純なグリッドレイアウトを使用しています。いくつかの細胞は、.leftまたは.rightクラスを有する。私のHTMLツリー内のそれらのセルの順序がどんなものであれ、新しい全幅セルが設定されるまで、そのクラスに応じて右または左のいずれかに追加することは可能ですか？

私がこれまでに使用したコード：

main{ 
    display:grid; 
    grid-template:"top top" "left right"; 
} 
section{ 
    grid-area:top; 
} 
section.left{ 
    grid-area:left; 
} 
section.right{ 
    grid-area:right; 
} 

編集：wuppie367の答え@は完全に私の問題を解決し、ここでこれを行う方法を次のとおりです。https://jsfiddle.net/r2myL1bt/

Answer 1

このようにすることができます。右の要素は幅の広い要素の間の隙間を埋めるので、幅の広い要素と左の要素の順序だけが重要です。右側の要素は上から下へのギャップを埋めるでしょう。

.main { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-auto-flow: column; 
 
    width: 240px; 
 
} 
 

 
.main div { 
 
    margin: 10px; 
 
    width: auto; 
 
    height: 100px; 
 
} 
 

 
.main .wide { 
 
    grid-column: 1/span 2; 
 
    background-color: green; 
 
} 
 

 
.main .left { 
 
    grid-column: 1/2; 
 
    grid-row: auto; 
 
    background-color: red; 
 
} 
 

 
.main .right { 
 
    grid-column: 2/3; 
 
    grid-row: auto; 
 
    background-color: blue; 
 
}

<div class="main"> 
 
    <div class="wide"></div> 
 
    <div class="left"></div> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 

 
    <div class="wide"></div> 
 
    <div class="right"></div> 
 
    <div class="right"></div> 
 
    <div class="left"></div> 
 
    <div class="left"></div> 
 
</div>

Answer 2

あなたはこのCSSを追加することができます50％の幅で、余白や詰め物がない場合や、50％の場合は正しく座る必要があります。

.left{ 
float:left; 
} 
.right{ 
float:right; 
}