CSS grid-autoflow 是如何工作的？

Question

我遇到了一个问题，就是不太理解隐式网格的工作原理。我已经阅读了文档、MDN和一些其他资源，但还有一个疑问。

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

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

.grid__item--5 {
  grid-row: 1 / -1;
}

<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>

以下是结果：

为什么第五个块在第二个块之前？

代码: https://jsfiddle.net/serhioses/51do02xa/

- Сергей Мирошник

Answer 1

你所需要的定义在规范的这一部分，首先我们有：

2. 处理锁定在给定行的项目。

对于每个具有明确行位置的网格项（即，grid-row-start和grid-row-end属性定义了明确的网格位置），按修改后的文档顺序处理：

然后

4. 定位其余的网格项。

因此，我们基本上定位那些在行内具有显式位置的项目（grid-row-start和grid-row-end都应与auto不同），然后考虑上述规范中描述的算法来放置其他项目。

即使您更改顺序，结果也将相同：

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

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

.grid__item--5 {
  grid-row: 1 / -1;
  order:100;
}

<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>

- Temani Afif

---

如果我将 1 / -1 更改为 span 2，则项目将变为隐式定位。我是对的吗？ - Сергей Мирошник

@СергейМирошник 是的，因为grid-row-end将是自动的，不再明确指定...开始和结束都需要明确指定。 - Temani Afif

@СергейМирошник span 2 表示 grid-row-start:span 2 和 grid-row-end:auto。 - Temani Afif

谢谢！对我非常有帮助。 - Сергей Мирошник