CSS 网格的顺序已关闭

Answer 1

由于 CSS 选择器

.main

，第二个

&:nth-child(2)

div (2/3) 以与预期不同的顺序出现。

在 CSS 中，

:nth-child()

伪类根据元素在一组兄弟元素中的位置来选择元素。在这种情况下，

.main:nth-child(2)

选择其兄弟元素中的第二个

.main

元素。但是，需要注意的是，

:nth-child()

会计算父元素的所有子元素，而不仅仅是具有相同类的元素。

您可以更改 CSS 以专门针对第二个

.main

，而不是使用

:nth-child(2)

。您可以通过使用唯一标识第二个

.main

元素的类或另一个选择器来完成此操作。这是使用类的示例：

.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;
}

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

.block {
  padding: 8px;
  background: lightgrey;
  border: 1px solid red;
}

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