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个新元素，并给它们指定不同的名称，以便可以根据需要定位它们。对此更好的解决方案是以某种方式（角度和其他方式）使用组件体系结构。

祝您编程愉快！

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

1 个答案: