CSS网格-无法使网格模板区域工作

Question

[不确定为什么容器的'grid-template-areas'属性和grid-item的'grid area'属性不起作用！ https://codepen.io/rfrostr/pen/XWmzewp

<div class="grid-container">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 33.333%);

  grid-template-areas:
    "three two one"
    "one two three";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

Answer 1

问题可能只是browser compatibility问题。在Firefox上，它工作正常。不在chrome上。