网格优先级：顺序与网格列/网格行

Question

问题

如果存在冲突，在网格中

grid-column

和

grid-row

总是优先于

order

吗？

---

文档

放置简写

网格项目放置算法

显示顺序：顺序属性

Flex 和网格容器按照顺序修改的文档顺序布局其内容，从最低编号的序数组开始向上。具有相同序数组的项目按照它们在源文档中出现的顺序排列。

自动放置算法适用于顺序修改后的文档顺序的网格项，而不是其原始文档顺序。

从规范来看，似乎首先应用

order

，然后运行放置算法以应用任何必要的更改，这将是。

---

示例

在以下代码片段中，具有四列和一行的网格使用

order

属性按逆源顺序对其网格项进行排序。

#grid-container
{
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px;
}

.grid-item
{
  color: white;
  background-color: darkblue;
  border: 1px solid white;
}

.grid-item:nth-child(1)
{
  order: 4;
}

.grid-item:nth-child(2)
{
  order: 3;
}

.grid-item:nth-child(3)
{
  order: 2;
}

.grid-item:nth-child(4)
{
  order: 1;
}

body
{
  background-color: black;
}

<div id = 'grid-container'>
  <div class = 'grid-item'>1</div>
  <div class = 'grid-item'>2</div>
  <div class = 'grid-item'>3</div>
  <div class = 'grid-item'>4</div>
</div>

在此代码段中，添加了冲突的

grid-column

和

grid-row

属性，它们优先于

order

。

#grid-container
{
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px;
}

.grid-item
{
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  grid-row: 1 / 2;
}

.grid-item:nth-child(1)
{
  order: 4;
  grid-column: 1 / 2;
}

.grid-item:nth-child(2)
{
  order: 3;
  grid-column: 2 / 3;
}

.grid-item:nth-child(3)
{
  order: 2;
  grid-column: 3 / 4;
}

.grid-item:nth-child(4)
{
  order: 1;
  grid-column: 4 / 5;
}

body
{
  background-color: black;
}

<div id = 'grid-container'>
  <div class = 'grid-item'>1</div>
  <div class = 'grid-item'>2</div>
  <div class = 'grid-item'>3</div>
  <div class = 'grid-item'>4</div>
</div>

---

结论

根据上面的小测试和规范，我认为答案可能是，如果存在冲突，放置属性始终优先于

order

。但最好有一个明确的答案，或者知道

order

可能优先的情况。

Answer 1

我认为答案可能是放置属性始终优先于顺序

我们不应该真正谈论优先级，因为两者不做同样的事情。整个放置算法同时考虑

order

和

grid-*

属性来放置项目。它不只考虑其中之一。

从规范您可以阅读：

自动放置算法适用于网格项按修改后的文档顺序，而不是其原始文档顺序。

因此算法会考虑物品的顺序来放置它们。

order: 1

将被放置在第一位置，

order: 2

将被放置在第二位置，依此类推，但是它们将被放置在哪里是一个不同的故事。我想你的困惑就在这里。

order

属性不放置物品，它定义何时放置物品。放置由

grid-*

属性定义并遵循以下算法

1. 放置任何未自动定位的内容。

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

4. 放置剩余的网格项。

   如果该项目有明确的列位置：

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

在您的情况下，所有项目都属于步骤 (2)，因为它们具有定义的列和行位置，因此浏览器将首先放置 item4，因为它具有

order: 1

，然后是 item3 等等。但由于它们都有不同的位置，因此您不会注意到任何事情，并且您可能会认为

order

没有做任何事情。

再举一个例子，其中的项目有相同的位置，你可以看到

order

属性的效果

#grid-container
{
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px;
}

.grid-item
{
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  grid-row: 1 ;
}

.grid-item:nth-child(1)
{
  order: 4;
  grid-column: 1;
}

.grid-item:nth-child(2)
{
  order: 3;
  grid-column: 2;
}

.grid-item:nth-child(3)
{
  order: 2;
  grid-column: 2;
}

.grid-item:nth-child(4)
{
  order: 1;
  grid-column: 4 ;
}

body
{
  background-color: black;
}

<div id = 'grid-container'>
  <div class = 'grid-item'>1</div>
  <div class = 'grid-item'>2</div>
  <div class = 'grid-item'>3</div>
  <div class = 'grid-item'>4</div>
</div>

我将 item2 和 item3 放置在同一位置，但 item2 位于上方，因为我们首先将 item3 然后 item2 放置在

order

属性后面

---

因此属性之间不存在冲突，浏览器不会先运行

order

。浏览器将按照 order 属性逐一放置每个项目，对于每个项目，我们查看

grid-*

属性以了解将其放置在哪里。

#grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 50px;
}

.grid-item {
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  width: 150%;
}

.grid-item:nth-child(1) {
  order: 2;
  grid-row: 1;
  grid-column: 1;
}

.grid-item:nth-child(2) {
  order: 1;
  grid-column: 2;
}

body {
  background-color: black;
}

<div id='grid-container'>
  <div class='grid-item'>1</div>
  <div class='grid-item'>2</div>
</div>

在上面，我们首先放置item2，然后放置item1。我使用大宽度显式创建重叠，以显示上面的 item1，因为即使两个项目不在同一位置，它也会放置在后面。删除

order

，item2 将与 item1 重叠