CSS Grid:自动放置算法的工作原理 [英] CSS Grid : How Auto placement algorithm works
问题描述
我正在查看MDN中提供的示例 grid-auto-flow 上的文章，以了解自动放置算法在CSS网格中的工作方式.
I was going through the example provided in MDN article on grid-auto-flow to understand how the auto-placement algorithm works in CSS grid.
这里是示例的定义方式 (您可以在此处更改选择选项来更改 grid-auto-flow 属性的值):
Here's how the example is defined (you can change the select option to change value of grid-auto-flow property here):
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网格按以下顺序放置项目:
Now as far as I understand from this another article from MDN, CSS grid places items in this order:
- 显式放置:首先放置所有已定位的项目(项目1和4)
- 隐式或自动放置:将所有其他项目放置在网格中定义的 order 值(如果有)中.如果未定义顺序，请按它们在文档源中出现的顺序放置.
- Explicit placement: First place all the positioned items (items1 and 4)
- Implicit or Auto-placement: Place all the other items in their order value (if any) defined in Grid. If no order defined, place them in order in which they appear in document source.
在上面的示例中，现在我对它的工作方式有两个主要疑问:
Now I have 2 major doubts regarding how it works in above example:
- 如果我们要首先放置已定位的项目，那么在选项设置为行的情况下，为什么不将显式放置的项目4(红色)放置在第一行和第二列?为什么在第二列中将隐式放置的Blue放置在其前面?另外，这种行为是看似正确的，当选项集为列
- 为什么在行和列值的情况下自动放置的工作方式有所不同.如果是选项列，我们首先填充列，那么为什么第一个自动放置的项(item2黄色)不能占据row1，column1位置的空单元格(就像在option的情况下那样) :行)
- 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
- 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)
推荐答案
如果我们要先放置定位项，那么在将选项设置为行的情况下，为什么不显式地将项4(红色)放置在第一行和第二列?为什么在第二列中将隐式放置的Blue放置在其前面?另外，这种行为是看似正确的，当选项集柱
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
为此，您需要参考规范和完整展示位置算法:
For this you need to refer to the specification and the full placement algorithm:
- 生成匿名网格项
- 将任何未自动定位的位置定位.
- 处理锁定到给定行的项目.
- 确定隐式网格中的列.
- 定位剩余的网格项.
诀窍是，您认为您的元素将放置在步骤(1)中，但不会.您的元素只有一个显式规则，另一个是自动规则，因此算作自动放置的元素.
The trick is that you think your element will be placed in the step (1) but no. Your element has only one explicit rule and the other is auto so it counts as an auto-positioned element.
如果遵守规则，则在步骤(1)中没有定位元素.我们在步骤(2)中放置了一个元素，它是#item1，因为它已锁定到给定的行，然后将所有其他元素放置在步骤(4)中，文档顺序将定义展示位置:
If we follow the rules, we have no element to position in the step (1). We have one element to position in the step (2) which is #item1 since it's locked to a given row Then all the other elements are placed in the step (4) and the document order will define the placement:
对于先前步骤未定位的每个网格项目，按订单修改后的文档顺序:
您没有使用order属性，因此文档顺序将作为参考.
You are not using the order property so the document order will be the reference.
值得一提的是，column流程也是如此，但结果更为直观，因为我们首先放置了#item4(列锁定)，然后考虑了放置文档的顺序，因此我们放置了#item1(不是因为该文档具有grid-row-start: 3;)
Worth to note that the same apply to the column flow but the result was more intuitive because we first placed #item4 (column locked) then considering the document order we place the #item1 (not because this one had grid-row-start: 3;)
为什么在行和列值的情况下自动放置的工作方式有所不同.在选项列的情况下，我们从填充列开始，因此为什么第一个自动放置的项(item2黄色)不能占据row1的column1位置的空单元格(就像在option:row的情况下一样)
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)
我认为上面的解释也涵盖了这一点.您需要遵循在两种情况下行为都不同的算法:
I think the explanation above cover this too. You need to follow the algorithm which behave differently in both cases:
为清楚起见，在假定grid-auto-flow已指定行的情况下编写了此算法.如果改为将其设置为column，则在此算法中交换对行和列，内联和块等的所有提及.
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.
这篇关于CSS Grid:自动放置算法的工作原理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
