CSS grid布局下order属性设置不生效的原因及生效逻辑咨询

我们先明确order属性的基础规则：

• 仅对flex、grid容器的直接子元素生效
• 所有直接子元素的order默认值为0
• 元素最终排列顺序按order值从小到大排序，值相同时按DOM原生顺序排列

你的.feature是grid容器，它的两个直接子元素DOM原生顺序为：

1. .feature__content（内容块）
2. .feature__image（图片）

两种写法的效果差异完全来自order值的对比结果不同：

第一种写法（生效） #

.feature:nth-of-type(1) .feature__content {
    order: 2;
}

此时两个子元素的order值：

• 内容块：2
• 图片：0（默认值）
  0 < 2，所以图片排在前、内容块排在后，成功实现图片左置的需求。

第二种写法（不生效） #

.feature:nth-of-type(1) .feature__image {
    order: 1;
}

此时两个子元素的order值：

• 内容块：0（默认值）
• 图片：1
  0 < 1，内容块的排序优先级依然高于图片，所以排列顺序和原生DOM一致，没有达到预期效果。

如果要通过修改图片的order实现需求，可将图片的order值设置为小于0的数值即可：

.feature:nth-of-type(1) .feature__image {
    order: -1;
}

内容的提问来源于stack exchange，提问作者rahidt