元素的顺序是否在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不会尝试填补之前的空白。

  

注意：默认情况下，自动放置算法在网格中呈线性状态，无需回溯;如果必须跳过一些空格来放置一个较大的项目，它将不会返回填充这些空格。要更改此行为，请在grid-auto-flow中指定密集关键字。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者您可以使用order属性来获得希望的结果：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，如GCyrillus建议的那样，使用grid-row属性强制将第三项放在第一行：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;