使用 CSS GRID 为什么我有这个差距? [英] Using CSS GRID Why Im getting this gap?

问题描述

我正在学习 CSS GRID，但我不知道为什么我在以下示例中出现了空白.第二个项目可能适合第一条轨道，但我在那里得到了一个空白.代码如下:

.container {显示:网格；边距:40px；网格间距:20px；文本对齐:居中；网格模板列:重复(4，1fr)；网格模板行:重复(4，1fr)；}.container div {背景:#ff8000；}.容器 .item1 {网格列:2/4；}

<div class="item1">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>

现在，如果我将以下属性 grid-row: 1/2; 添加到第一项，现在第二项将占据第一条轨道.这就是我所期望的.这是添加 grid-row: 1/2;:

的代码

.container {显示:网格；边距:40px；网格间距:20px；文本对齐:居中；网格模板列:重复(4，1fr)；网格模板行:重复(4，1fr)；}.container div {背景:#ff8000；}.容器 .item1 {网格列:2/4；网格行:1/2；}

<div class="item1">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>

我的问题是:

为什么在第一个代码中我有一个缺口?第二个项目可以放入第一个轨道.

我写的第一个和第二个代码有什么区别?

解决方案

您需要了解放置算法才能理解这种行为.从规范你可以找到完整的算法并确定何时处理每个项目，这是了解这两种情况之间差异的关键.

算法的主要步骤是:

<块引用>

0. 生成匿名网格项

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

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

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

4. 定位剩余的网格项.

让我们从上一个示例开始，在该示例中，您为第一个项目明确定义了 grid-colum 和 grid-row不是自动定位的元素，所以我们把它放在第 (1) 步.

然后我们将转到步骤(4)来定位剩余的项目

<块引用>

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

所以我们的光标是顶部/左侧的单元格，item2 将被放置在那里，我们只需按照树的顺序放置所有其他元素:

<块引用>

对于前面步骤没有定位的每个网格项，按顺序修改的文档顺序:

当然，没有任何项目会与已经放置的 item1 重叠，我们会按照算法为每个项目不断增加光标.

---

现在让我们考虑第一个 棘手 情况，唯一的区别是您没有指定 grid-row 并且这将不再使您的元素成为 not auto-positioned 一个因为你只定义了 grid-column 所以行将被自动定义并且项目现在将进入步骤 (4)，如果你仔细检查步骤(4)你会发现两个子步骤:

<块引用>

如果项目有明确的列位置:

如果项目在两个轴上都有自动网格位置:

item1 将考虑第一个，将放置在第二列中，并将增加光标！.光标的增量是将第二个元素放在后面的原因.

在您的第二个示例中，item1 不会使用光标，因为它在步骤 (1) 中被考虑在内，因此 item2 将是第一个使用光标的，这与您的第一个示例中的 item1 将是第一个使用它的示例不同.

值得注意的是，在步骤(4)中，我们有两种算法.稀疏"一种(默认行为)，我们从不重置游标，我们总是增加它，这会产生间隙.密集"在每一步重置光标以填充所有单元格的算法.激活密集"你需要考虑的算法 grid-auto-flow

.container {显示:网格；边距:40px；网格间距:20px；文本对齐:居中；网格模板列:重复(4，1fr)；网格模板行:重复(4，1fr)；网格自动流:密集；}.container div {背景:#ff8000；}.容器 .item1 {网格列:2/4；}

<div class="item1">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>

<块引用>

密集

如果指定，自动放置算法使用密集"打包算法，如果较小的项目稍后出现，该算法会尝试更早地填充网格中的孔.这可能会导致项目出现乱序，这样做会填补较大项目留下的空缺.

如果省略，则使用稀疏"算法，其中放置算法仅在放置项目时在网格中向前"移动，从不回溯以填充孔洞.这确保所有自动放置的项目都按顺序"显示，即使这会留下可能被后续项目 ^ref

---

与使用相同算法解释的另一个非直观行为相关的问题:CSS Grid : How Auto Placement algorithm works

Im learning CSS GRID and I dont know why Im getting a gap in the following example. The second item could fit in the first track but instead Im getting a gap there. Here is the code:

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Now if I add the following property grid-row: 1/2; to the first item, now the second item occupies the first track. That is what I expect. Here is the code adding grid-row: 1/2;:

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
  grid-row: 1/2;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

My question is:

Why in the first code Im getting a gap? The second item can fit in the first track.

And what is the difference between the first and the second code that I have written?

解决方案

You need to understand the placement algorithm to understand this behavior. From the specification you can find the full algorithm and more identify when each item will be treated which is the key here to understand the difference between both cases.

The main steps of the algorithm are:

0. Generate anonymous grid items

1. Position anything that’s not auto-positioned.

2. Process the items locked to a given row.

3. Determine the columns in the implicit grid.

4. Position the remaining grid items.

Let's start with your last example where you explicitely defined a grid-colum and grid-row for the first item which make it a not auto-positioned element so we place it at the step (1).

Then we will go to step (4) to position the remaining items

The auto-placement cursor defines the current "insertion point" in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

So our cursor is the top/left cell and the item2 will be placed there and we simply follow the tree order to place all the other element:

For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

Of course, no item will overlap the item1 already placed and we keep incrementing the cursor for each item following the algorithm.

---

Now let's consider the first tricky case where the only difference is that you didn't specify the grid-row and this will no more make your element a not auto-positioned one because you only defined the grid-column so the row will be automatically defined and the item will now fall into the step (4) and if you check closely the step (4) you will find two sub steps:

If the item has a definite column position:

If the item has an automatic grid position in both axes:

The item1 will consider the first one, will get placed in the second column and will increment the cursor!. The incrementation of the cursor is what make the second element placed after.

In your second example the item1 will not use the cursor since it's considered in the step (1) so the item2 will be the first to use the cursor unlike in your first example where item1 will be the first one to use it.

Worth to note that in the step (4) we have two kind of algorthim. The "sparse" one (the default behavior) where we never reset the cursor and we always increment it which create gaps. The "dense" algorithm that reset the cursor at each step in order to fill all the cells. To activate the "dense" algorithm you need to consider grid-auto-flow

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: dense;
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

dense

If specified, the auto-placement algorithm uses a "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

If omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later item ^ref

---

Related question with another non-intuitive behavior explained with the same algorithm: CSS Grid : How Auto placement algorithm works

这篇关于使用 CSS GRID 为什么我有这个差距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！