如何让网格区域有文档流？

Question

我有一个包含两个区域（left 和 right）的 CSS 网格。我想在这些区域内放置多个 spans，但是当我执行以下操作时，这些项目出现在彼此之上，就好像它们被从文档流中取出一样。

如何将它们放回文档流中，使它们并排显示？

div {
    display: grid;
    grid-template: 1fr 1fr / 1fr;
    grid-template-areas: "left right"
}

div .left {
    grid-area: left;
}

div .right {
    grid-area: right;
}

<div>
    <span class="left">First</span>
    <span class="left">Second</span>
    <span class="left">Third</span>
    <span class="right">Fourth</span>
    <span class="right">Fifth</span>

</div>

Codepen

Answer 1

每个网格项目必须有一个唯一的 grid-area 名称。

如果您将相同的名称应用到多个元素，那么在每个级联中，将显示最后一个项目，并覆盖具有相同名称的其他项目。

以下是正确设置的示例，仅供说明之用：

div {
  display: grid;
  grid-template-areas: "left1 right1"
                       "left2 right2"
                       "left3 right3"
                       "left4 right4"
                       "left5 right5";
}

span:nth-child(1) { grid-area: left1; }
span:nth-child(2) { grid-area: left2; }
span:nth-child(3) { grid-area: left3; }
span:nth-child(4) { grid-area: right1; }
span:nth-child(5) { grid-area: right2; }

<div>
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
  <span>Fifth</span>
</div>

您似乎在寻找在第三行之后换行的垂直流动网格。在这种情况下，这就是您所需要的：

div {
  display: grid;
  grid-template: repeat(3, auto) / 1fr 1fr;
  grid-auto-flow: column;
}

<div>
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
  <span>Fifth</span>
</div>

在此处了解有关 grid-auto-flow: column 的更多信息：Make grid container fill columns not rows

Answer 2

满格

网格都是关于列和行的，所以没有区域名称（只是位置的别名）的版本是：

div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 50px 50px;
}

div .left {
    grid-column: 1/1;
}

.la {
    grid-row: 1/1;
}

.lb {
    grid-row: 2/2;
}

.lc {
    grid-row: 3/3;
}

div .right {
    grid-column: 2/2;
}

<div>
    <span class="left la">First</span>
    <span class="left lb">Second</span>
    <span class="left lc">Third</span>

    <span class="right la">Fourth</span>
    <span class="right lb">Fifth</span>
</div>

两栏，无处不在！

如果您只想"two columns"而不关心跨度元素的定位，这可能更适合您。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.left {
    grid-column: 1/1;
    grid-row: 1/1;
}

.right {
    grid-column: 2/2;
    grid-row: 1/1;
}

span {
    display: block;
}

<div class="grid">
    <div class="left">
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
    </div>

    <div class="right">
    <span>Fourth</span>
    <span>Fifth</span>
    </div>
</div>

如何让网格区域有文档流？

How to get grid areas to have document flow?

css

css-grid

满格

两栏，无处不在！