css网格布局是如何工作的

Question

我想知道 Css 网格布局如何。我以为我已经接近理解它了，直到我在下面尝试了这个。

我认为它会使项目 5 落后于 3，因为它在网格中没有定义位置，但它却在项目 3 之后，它背后的行为是什么？

https://codepen.io/anon/pen/GOPvXO\

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.wrapper div:nth-child(1){
  background-color: blue; 
  grid-column-start: 1;
  grid-column-end: 3;
}
.wrapper div:nth-child(2){
  background-color: red;
}
.wrapper div:nth-child(3){
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}
.wrapper div:nth-child(4){
  background-color: lightblue;
    grid-column-start: 2;
    grid-row-end: 4;
}
.wrapper div:nth-child(5){
  background-color: pink;
}
.wrapper div:nth-child(6){
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 1

W3C docs 和 this article 可以帮助您了解网格为什么会这样工作。

让我们看看如何根据文档中的8.5 Grid Item Placement Algorithm来放置网格项：

0。生成匿名网格项

没有匿名项目 - 没有生成任何网格项目

1.定位任何非自动定位的东西。

在这一步中，只有 元素 4 被定位

grid-column-start: 2; /* second column, span 1 */
grid-row-end: 4;      /* third row, span 1 */

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

没有锁定到特定行的项目，所以没有定位

3。确定隐式网格中的列。

显式网格中的列数为 3。 没有需要超过 3 列的项目 - 元素 1,2 和 4 不需要超过 3，其余所有都没有指定显式列，这意味着隐式网格中的列数为 3

4.定位剩余的网格项。

在您的情况下，算法根据默认的“稀疏”打包工作：

将其放置的列起始行设置为最早（最小 正索引）行索引，确保该项目的网格区域不会 重叠任何占用的网格单元，并且超过任何网格项 之前通过此步骤放置在该行中。

此时您还有五个元素需要定位：1、2、3、5 和 6。 自动放置光标现在位于最开始的行和列上，即第 1 行和第 1 列。逐步解释所有剩余项目的放置方式：

• 将元素 1（确定的列位置）置于第 1 行第 1-2 列，自动放置光标移动到第 1 行第 3 列。
• 将元素 2（在两个轴上自动定位）置于第 1 行第 3 列，自动放置光标移动到第 2 行第 1 列，因为只有 3 列。
• 将元素 3（确定的列位置）置于第 2 行第 2 列，自动放置光标移动到第 2 行第 3 列。
• 将元素 5（在两个轴上自动定位）定位在第 2 行第 3 列，自动放置光标移动到第 3 行第 1 列。
• 定位元素 6（在两个轴上自动定位），自动放置光标位于第 3 行第 3 列。

---

如果你想让元素 5 落后于 3，你有两种方法：

解决方案1：设置grid-auto-flow: dense;

在放置 元素 3 后，自动放置光标将转到隐式网格中最开始的行和列行 - 即第 2 行第 1 列。

元素 6 也会发生同样的情况，因此它将被放置在第 2 行第 3 列中。

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

解决方案 2：为元素 3 显式定义行

这样元素 3 将被放置在算法的第 1 步，第 4 步将如下所示：

• 将元素 1（确定的列位置）置于第 1 行第 1-2 列，自动放置光标移动到第 1 行第 3 列。
• 将元素 2（在两个轴上自动定位）置于第 1 行第 3 列，自动放置光标移动到第 2 行第 1 列，因为只有 3 列。
• 将元素 5（两个轴上的自动定位）定位在第 2 行第 1 列，自动放置光标移动到第 3 行第 3 列，因为第 2 行第 2 列已被占用
• 定位元素 6（在两个轴上自动定位），自动定位光标移动到第 3 行第 1 列。

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>