Mac上でChromeまたはMozillaでグリッドテンプレートが機能しない

Question

グリッドテンプレートと列と行のプロパティを持つグリッドテンプレートを作成しました。しかし、Mac上でChromeやMozillaを使って開くと、1列にとどまります。私が作ったレイアウトではありません。

私は間違っていますか？

.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

あなたは頭の中であなたのグリッドクラスの内部形式のタグを入れて試すことができます。それは私のために働いた。