CSS网格:自动元素定位

Question

我在学习CSS网格技术。现在，我不理解以下行为(请参阅代码片段)：

在“示例1”中，元素b没有grid-row定义。元素c和d紧跟在元素b之后(c和d在元素c之后，直接从元素b后面开始)。

在“示例2”中，元素b具有grid-row: 4 / 5;定义。这里是第一列第二行中的元素c(在第2行和第3行之间)，元素d位于最后一列的第二行(第3行和第4行之间)。

为什么是这样？我希望“示例2”中的结果与“示例1”中的结果相同。如果我定义了grid-auto-flow: row dense;，我就会期望在“示例2”中得到结果。

​

.grid{
  display: grid;
  grid-template-columns: repeat(3 , 100px);
  grid-template-rows: repeat(5 , 50px);
  grid-gap: 10px;
}
.title{
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
.a{
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}
.b{
  grid-column: 1 / 3;
}
.grid:nth-child(2) .b{
  grid-row: 4 / 5;
}


/* the code below is not necessary, it is only to style the example */
html,body{
  margin:0;
  padding:0;
}
.wrapper{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  border:1px solid black;
}
.grid{
  border:1px solid black;margin:10px;float:left;
}
.grid div{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#ff5533;
  border:1px solid #dd2200;
  border-radius:5px;
  font-size:20px;
  font-weight:bold;
}
.grid div.c,
.grid div.d{
  background-color:#ffee00;
  border:1px solid #aaaa00;
}

<div class="grid">
  <div class="title">example 1</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

<div class="grid">
  <div class="title">example 2</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

​

Answer 1

要理解这种行为，您需要遵循规范中的完整布局算法：https://www.w3.org/TR/css-grid-1/#auto-placement-algo

我们有不同的步骤，最重要的步骤如下：

(1)定位任何不是自动定位的东西。

(2)处理锁定到给定行的项。

(4)定位其余网格项。

现在，您需要标识“非自动定位”项，它们具有显式的grid-row和grid-column (或grid-area)。换句话说，我们知道它们在列和行中的确切位置。如果只定义行或列，则这些项不再是“非自动定位”。

在第一个例子中，只有A(和title)属于这个类别，所以我们将它们放在第(1)步，然后移到下一个步骤“处理锁定到给定行的项”。我们没有这个类别中的项目，所以我们移到步骤(4)

在这一步中，我们将考虑“稀疏”算法，所以我们首先将B放在能够容纳它的第一个区域，然后是C，然后D。“稀疏”算法不允许我们回来填补漏洞，从而得到结果。

现在，如果我们考虑第二种情况，您的B元素将有一行和列，因此它将属于“非自动定位”。项目，并将在步骤(1)，如A和标题。

然后，我们将其余的项定位在步骤(4)上，我们将从第一个空网格单元开始，该单元格可以保存列表中的第一个项(C项)，我们可以将它放在第一行/列中。

自动放置光标定义网格中当前的“插入点”，指定为一对行和列网格线。最初，自动放置游标被设置为隐式网格中最开始的行和列行。

因此，这两种情况的不同之处在于，B元素将被放置在不同的步骤，但位置相同。这将对其余项目产生影响。如果它放在步骤3中，它将与C和D位于同一个列表中，但如果放在步骤1，它将属于另一个列表，它将不同地放置C和D。