网格模板在Mac上不适用于Chrome或Mozilla

Question

我制作了一个网格模板，其中包含网格模板，列和行的属性。但是当我尝试在Mac上使用Chrome或Mozilla打开它时，它会保留一列...而不是我已经制作的布局。

我做错了什么？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试将你的网格类放在样式标记中。它对我有用。