css - CSS网格自动流如何工作？

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/

标签： csscss-grid

Answer 1

您想要的内容在我们首先拥有的规范的这一部分中定义：

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

对于每个具有确定行位置的网格项（即grid-row-start 和 grid-row-end属性定义一个确定的网格位置），按照 order-modified 文档顺序：

然后

4. 定位剩余的网格项目。

因此，基本上我们将具有显式位置的项目放置在行内（两者grid-row-startANDgrid-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>