CSS网格:自动布局算法的工作原理
我正在研究grid-auto-flow上的MDN 文章提供的示例，以了解CSS网格中的自动布局算法是如何工作的。
下面是如何定义示例(您可以在这里更改select 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>
现在，据我所知，从MDN的另一个文章中，CSS网格按以下顺序放置条目：
- 显式放置：首先放置所有定位项(items1和4)
- 隐式或自动放置：将所有其他项放置在网格中定义的order值(如果有的话)中。如果没有定义顺序，请按它们在文档源中出现的顺序排列。
现在，我有两个主要的问题，在上面的例子中它是如何工作的：
- 如果我们先放置项，然后在选项设置为行的情况下，为什么不显式地将项4(红色)放置在第一行和第二列中？为什么将蓝色隐式放置在第二列的前面？此外，当选项设置为列时，此行为似乎是正确的。
- 为什么在行和列值情况下自动放置的工作方式不同。对于选项列，我们从填充列开始，那么为什么第一个自动放置的项(item2黄色)不能占据row1，column1位置的空单元格(就像选项：row)一样。
回答 1
Stack Overflow用户
发布于 2020-10-04 11:45:17
如果我们先放置定位项，然后在选项设置为行时，为什么不显式地将项4(红色)放置在第一行和第二列中？为什么将蓝色隐式放置在第二列的前面？此外，当选项设置为列时，此行为似乎是正确的。
为此，您需要参考规范和全布局算法
- 生成匿名网格项
- 定位任何不是自动定位的东西。
- 处理锁定到给定行的项。
- 确定隐式网格中的列。
- 定位其余的网格项。
诀窍是，您认为您的元素将放置在步骤(1)中，但没有。您的元素只有，一个显式规则，另一个是auto，因此它可以算作一个自动定位的元素。
如果我们遵循规则，我们在步骤(1)中没有要定位的元素。我们在步骤(2)中有一个要定位的元素，即#item1，因为它被锁定在给定的行中，那么所有其他元素都放置在步骤(4)中，文档顺序将定义位置：
对于前面的步骤尚未定位的每个网格项，采用顺序修改的文档顺序：
您没有使用order属性，因此文档顺序将是引用。
值得注意的是，同样适用于column流，但是结果更直观，因为我们首先放置了#item4 (锁定列)，然后考虑到文档顺序，我们放置了#item1 (而不是因为这个有grid-row-start: 3;)
为什么在行和列值情况下自动放置的工作方式是不同的。对于选项列，我们从填充列开始，那么为什么第一个自动放置的项(item2黄色)不能占据row1，column1位置的空单元格(就像选项:row的情况一样)。
我想上面的解释也涵盖了这一点。您需要遵循在这两种情况下行为不同的算法：
为了清晰起见，编写该算法时假设网格-自动流已经指定行。如果将其设置为列，则在此算法中交换所有对行和列、内联和块等的提及。
https://stackoverflow.com/questions/64198236
复制
腾讯云开发者
