为什么我的 CSS 网格项目堆叠在一起？ [关闭]

Question

当我将 CSS 网格和项目分配到网格模板区域时，我遇到了一些问题，我对 CSS 网格还很陌生，所以我可能会遗漏一些基础知识。我在这里做了一个游乐场：

https://jsfiddle.net/xvg84cuh/

.grid{
  display: grid;
  grid-template-rows: auto;
  grid-template-areas:
    "left right"
    ". right";
}
.grid div:nth-child(1){
  grid-area: left;
}
.grid div:nth-child(2),
.grid div:nth-child(3){
  grid-area: right;
}

div{
  float: left;
  width: 100%;
}

<div class="grid">
  <div>
    Image
  </div>
  <div>
    Stuff 1
  </div>
  <div>
    Stuff 2
  </div>
</div>

您可以看到“stuff 1”和“stuff 2”的 div 彼此堆叠，而不是按顺序显示在彼此下方。

感谢您的帮助:)

Answer 1

它们是堆叠的，因为您为第二个和第三个孩子添加了相同的网格区域属性

.grid{
  display: grid;
  grid-template-rows: auto;
  grid-template-areas:
    "left right"
    ". third-right";
}
.grid div:nth-child(1){
  grid-area: left;
}
.grid div:nth-child(2){
  grid-area: right;
}
.grid div:nth-child(3){
  grid-area: third-right;
}

div{
  float: left;
  width: 100%;
}

<div class="grid">
  <div>
    Image
  </div>
  <div>
    Stuff 1
  </div>
  <div>
    Stuff 2
  </div>
</div>

有关grid-template-area 和grid-area 的更多知识，请参阅： grid-template-area grid-area