html - 网格模板不适用于 Mac 上的 Chrome 或 Mozilla

Question

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

我做错了什么？

.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

你能试着把你的网格类放在 head.style 标签里面吗？它对我有用。