CSS Grid - 无法让网格模板区域工作[重复]

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

啊，问题是你要求网格做一些它不能做的事情。您正在定义 3 个 DOM 元素，然后尝试以将它们分成 6 个无法完成的单独部分的方式定位它们。将网格视为网格，其中元素必须是矩形的正方形，您应该参加比赛！

如果您希望这种确切的格式起作用，我会制作 3 个新元素并给它们起不同的名称，以便您可以随意放置它们。一个更好的解决方案是以某种方式（角度和诸如此类）使用组件架构。

编码愉快！