Rastervorlage funktioniert nicht für Chrome oder Mozilla auf dem Mac

Question

Ich habe eine Rastervorlage mit den Eigenschaften von Rastervorlage und Spalten und Zeilen erstellt. Aber wenn ich versuche, es mit Chrome oder Mozilla auf dem Mac zu öffnen, bleibt es mit einer Spalte ... und nicht mit dem Layout, das ich gemacht habe.

Was mache ich falsch?

.grid { 
 
    content: ''; 
 
    clear: both; 
 
    display: grid; 
 
    grid-template-columns: 43% 57%; 
 
} 
 

 
.col-1 { 
 
    grid-column:1; 
 
    grid-row: 1; 
 
    background: red; 
 
    height: 50px; 
 
} 
 

 
.col-2 { 
 
    grid-column:2; 
 
    grid-row: 1; 
 
    background: blue; 
 
} 
 

 
.col-3 { 
 
    grid-column-start: 1; 
 
    grid-column-end: 3; 
 
    grid-row: 2; 
 
    background: green; 
 
}

<div class="grid"> 
 
    <div class="col-1"> 
 
    Column 1 - Row 1 
 
    </div> 
 
    <div class="col-2"> 
 
    Column 2 - Row 1 
 
    </div> 
 
    <div class="col-3"> 
 
    Column 1 and 2 - Row 2 
 
    </div> 
 
</div>

Answer 1

können Sie versuchen, Ihre Gitter Klasse innerhalb Style-Tag in den Kopf zu setzen. Es hat für mich funktioniert.