我正在查看 MDN 中提供的示例 article在 grid-auto-flow 上了解自动放置算法在 CSS 网格中的工作原理。
例子是这样定义的 (您可以在此处更改选择选项以更改grid-auto-flow属性的值):
function changeGridAutoFlow() {
var grid = document.getElementById("grid");
var direction = document.getElementById("direction");
var dense = document.getElementById("dense");
var gridAutoFlow = direction.value === "row" ? "row" : "column";
if (dense.checked) {
gridAutoFlow += " dense";
}
grid.style.gridAutoFlow = gridAutoFlow;
}#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
grid-auto-flow: column;
/* or 'row', 'row dense', 'column dense' */
}
#item1 {
background-color: lime;
grid-row-start: 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
grid-column-start: 2;
background-color: red;
}
#item5 {
background-color: aqua;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
<title>grid-auto-flow - Setting_grid_auto-placement - code sample</title>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
<option value="column">column</option>
<option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
<label for="dense">dense</label>
</body>
</html>据我所知，另一个article来自 MDN，CSS 网格按以下顺序放置元素:
- 显式放置:首先放置所有已定位的元素(元素 1 和 4)
- 隐式或自动放置:将所有其他元素放置在它们在网格中定义的顺序值(如果有)中。如果未定义顺序，请按照它们在文档来源中出现的顺序放置它们。
现在我有 2 个关于它在上面的例子中如何工作的主要问题:
- 如果我们首先放置定位项，那么在选项设置为行的情况下，为什么没有明确放置项 4(红色)放置在第一行和第二列？为什么隐式放置的 Blue 在第二列中被放置在它之前？ Also, this behavior is seemingly correct when option set to column
- 为什么自动放置在行和列值的情况下工作不同。在选项 column 的情况下，我们从填充列开始，那么为什么第一个自动放置的元素(item2 黄色)不能占据 row1，column1 位置的空单元格(就像在选项的情况下一样) : 行)
最佳答案
If we are placing positioned items first, then in case of option set to row, why isn't explicitly placed item 4 (red) placed in the first row and 2nd column? Why does implicitly placed Blue get placed before it in second column? Also, this behavior is seemingly correct when option set to column
为此，您需要引用规范和 full placement algorithm :
- Generate anonymous grid items
- Position anything that’s not auto-positioned.
- Process the items locked to a given row.
- Determine the columns in the implicit grid.
- Position the remaining grid items.
诀窍在于您认为您的元素将被放置在步骤 (1) 中，但没有。您的元素只有一个显式规则，另一个是自动的，因此它算作一个自动定位的元素。
如果我们按照规则，我们在步骤(1)中没有元素可以定位。我们要在步骤 (2) 中放置一个元素 #item1 因为它被锁定到给定的行 然后所有其他元素都放在步骤 (4) 中文档顺序将定义位置:
For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:
您没有使用 order 属性，因此文档顺序将作为引用。
值得注意的是，这同样适用于 column 流程，但结果更直观，因为我们首先放置 #item4(列锁定)，然后考虑文档顺序我们放置 #item1(不是因为这个有 grid-row-start: 3;)
Why is auto-placement working differently in case of row and column values. In case of option column we start by filling columns, so why can't the first auto-placed item (item2 yellow) occupy the empty cell at row1, column1 position (like it does in case of option: row)
我认为上面的解释也涵盖了这一点。您需要遵循在这两种情况下表现不同的算法:
To aid in clarity, this algorithm is written with the assumption that grid-auto-flow has row specified. If it is instead set to column, swap all mentions of rows and columns, inline and block, etc. in this algorithm.
关于html - CSS 网格 : How Auto placement algorithm works，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64198236/