如何用CSS将Grid布局中的第二个子Div移至首位？

问题背景 #

现有HTML结构：

<div class="parent">
        <div class="child1">First</div>
        <div class="child2">Second</div>
        <div class="child3">Third</div>
</div>

父容器已配置Grid布局：

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

需要让子元素显示顺序变为：Second First Third

解决方案 #

有两种简单的方式实现需求：

方法1：使用grid-column指定列位置

直接通过grid-column属性给目标元素分配列位置，调整两个子元素的列序号即可：

.child2 {
    grid-column: 1; /* 让第二个子元素占据第一列 */
}
.child1 {
    grid-column: 2; /* 第一个子元素移到第二列 */
}

这种方式适合精确控制每个元素的所在列，直观且针对性强。

方法2：使用order属性调整排列顺序

Grid布局支持Flex布局的order属性，默认所有子元素的order值为0，给child2设置更小的order值，就能让它排在最前面：

.child2 {
    order: -1; /* 数值小于默认的0，会优先排列 */
}

这种方式更简洁，不需要调整其他元素的属性，适合只需要调整单个元素顺序的场景。

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