html - 元素的顺序是否定义了它们在 CSS 网格中的位置？

Question

以下代码按预期工作:单元格在定义的行之间填充颜色

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2/4;
}

#item3 {
  background-color: blue;
  grid-column: 4/7;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

然后我尝试通过交换 grid-column 条目来交换最后两个元素(黄色和蓝色):

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 4/7;
}

#item3 {
  background-color: blue;
  grid-column: 2/4;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

item3 未正确显示。我想这是因为 item2 已在网格中进一步呈现，并且无法再呈现较早的元素(疯狂猜测)。

我不明白 HTML 中元素的顺序如何受 CSS 中元素放置的影响，如解释的那样 in the documentation ？ HTML 中的顺序不应该无关紧要吗？

Answer 1

元素按照在 html 中出现的顺序并根据它们指定的位置一个接一个地插入到网格中。 The placement algorithm不会尝试填补之前的任何空白。

Note: By default, the auto-placement algorithm looks linearly through the grid without backtracking; if it has to skip some empty spaces to place a larger item, it will not return to fill those spaces. To change this behavior, specify the dense keyword in grid-auto-flow.

#grid {
  display: grid;
  height: 300px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 4/7;
}

#item3 {
  background-color: blue;
  grid-column: 2/4;
}

#item4 {
  background-color: grey;
  grid-column: 5/6;
}

#item5 {
  background-color: orange;
  grid-column: 1/7;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>

在您的示例中，您可以使用 grid-auto-flow属性并将其设置为 dense，如文档所建议的:

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
  grid-auto-flow: dense;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 4/7;
}

#item3 {
  background-color: blue;
  grid-column: 2/4;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

或者您可以使用 order属性以获得期望的结果:

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 4/7;
  order: 3;
}

#item3 {
  background-color: blue;
  grid-column: 2/4;
  order: 2;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

或者，按照 GCyrillus 的建议，使用 grid-row 强制将第三项放在第一行中属性:

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 4/7;
}

#item3 {
  background-color: blue;
  grid-column: 2/4;
  grid-row: 1;
}

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>