为什么我的 CSS 网格项目相互堆叠？

Question

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

.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>

您可以在其中看到“内容 1”和“内容 2”div 堆叠在一起，而不是按顺序出现在彼此下方。

感谢您的帮助:)

Answer 1

它们是堆叠的，因为您将相同的 grid-area 属性添加到第二个和第三个 child

.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

为什么我的 CSS 网格项目相互堆叠？

Why are my CSS grid items stacking on top of each other?

css

layout

css-grid