CSS Grid布局元素显示顺序不符合预期问题咨询

我在使用CSS Grid布局时遇到元素显示顺序异常问题，第二个class为main、文本为「Main 1/3」的div显示顺序不符合预期。

HTML结构 #

<div class="container">
  <div class="block top">Top</div>
  <div class="block main">Main 1/3</div>
  <div class="block main">Main 2/3</div>
  <div class="block bottom">Bottom</div>
</div>

SCSS代码 #

.container{
  height: 100%;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 8px;
}
.top{
  grid-row: 1;
  grid-column: 1 / -1;
}
.bottom{
  grid-row: 3;
  grid-column: 1 / -1;
}
.main{
  grid-row: 2;
  grid-column: 1 / 2;
      
  &:nth-child(2){
    grid-column: 2 / 4;
  }
}
.block{
  padding: 8px;;
  background: lightgrey;
  border: 1px solid red;
}

异常显示效果 #

问题原因 #

问题出在:nth-child(2)选择器的逻辑上：

• 父容器的子元素顺序是：.top（第1个）、第一个.main（第2个）、第二个.main（第3个）、.bottom（第4个）。
• 代码里的.main:nth-child(2)选中的是父容器中第2个子元素，也就是文本为「Main 1/3」的那个.main，给它设置了grid-column: 2 / 4，让它占据右侧两列；而第二个.main是父容器的第3个子元素，没被这个选择器命中，所以用了.main默认的grid-column: 1 / 2，最终导致两个.main的位置颠倒。

解决方法 #

有两种常用修复方式：

1. 使用:nth-of-type()选择器，针对.main元素自身的顺序来匹配：

.main{
  grid-row: 2;
  grid-column: 1 / 2;
      
  &:nth-of-type(2){
    grid-column: 2 / 4;
  }
}

2. 给第二个.main单独添加类名（比如main--wide），通过类直接指定网格位置：

<div class="block main main--wide">Main 2/3</div>

.main--wide{
  grid-column: 2 / 4;
}

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