CSS-Grid-Vorlage: Füllen Spalten je nach Klasse der Zelle

Question

Ich habe eine einfache Raster-Layout, wo Zellen 100% oder 50% breit sein können. Einige Zellen haben eine .left oder .right Klasse. Wie auch immer die Reihenfolge dieser Zellen in meinem HTML-Baum ist, ist es möglich, sie entweder an die rechte oder linke Seite, abhängig von ihrer Klasse, anzuhängen, bis eine neue Zelle voller Breite gesetzt ist?

Der Code, den ich bisher verwendet:

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

Edit: @ wuppie367 Antwort perfekt mein Problem löst, ist hier, wie dies getan werden kann: https://jsfiddle.net/r2myL1bt/

Answer 1

Sie können es so erreichen. Die Elemente auf der rechten Seite füllen die Lücken zwischen den breiten Elementen, so dass nur die Reihenfolge der breiten und linken Elemente wichtig ist. Die Elemente auf der rechten Seite füllen die Lücken von oben nach unten.

.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

Sie diese CSS das könnte hinzufügen Klassen und wenn sie beide 50% Breite ohne Marge oder Polsterung sind, oder kombiniert mit denen machen 50% sollten sie richtig sitzen.

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