如何在CSS网格中指定布局顺序？

Question

因此，我有一个网格的网格，如下所示。基本上，其布局的方式如下：

[1] [ Item 1 ] [2] [ Item 2 ]  
[3] [ Item 3 ] [4] [ Item 4 ]

一旦屏幕通过媒体查询缩小到移动设备的范围，它就会改变这一点：

[1] [ Item 1 ]  
[2] [ Item 2 ]  
[3] [ Item 3 ]  
[4] [ Item 4 ]

这是完美的，这就是我所需要的。我的问题是，在第一个示例中，我需要像这样进行：

[1] [ Item 1 ] [3] [ Item 3 ]  
[2] [ Item 2 ] [4] [ Item 4 ]

现在，在我的实际代码中，有更多的网格项目，所以我基本上希望它布置第一列，然后是第二列，而不是填充行行。我可以实际更改HTML中网格项目的顺序，但是在移动屏幕上，订单弄乱了。我看了看网格 - 自动流量，我无法弄清楚这是否是我需要的。解决方案可能是如此简单，但我认为我与这个项目非常接近，很难退后一步并弄清楚它。任何帮助将不胜感激！

.grid {
  display: grid;
  grid-template-columns: 48px 1fr 48px 1fr;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

<section class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">Item 1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">Item 4</div>
</section>

Answer 1

要更改 order ，您可以使用 order ;）

使用 nth-child（n）选择器，从您的html中，可能是：

.grid {
  display: grid;
  grid-template-columns: 48px 1fr 48px 1fr;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

.grid-item:nth-child(4n) ,/* catch 4, 8, ..*/
.grid-item:nth-child(4n - 1)/*, catch 3,7,...)*/
 {
  order: 1;
  color:green;
  font-weight:bold;
}

<section class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">Item 1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">Item 4</div>
</section>

ressources

• 
  

• https://developer.mozilla.org/en-us/docs/web/css/order

对于未知数的项目（＆amp;如果您有最大可能已知的项目），则可以使用：nth-​​last-- Child（）：First-Child 选择器要测试将X项目放入不同列中的项目数。

具有8个项目的示例（16）

.grid {
  display: grid;
  grid-template-columns: 48px 1fr 48px 1fr;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
  grid-auto-flow:row dense;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

/* start filling 2 columns of the grid */
.grid-item:nth-child(odd)  {
  grid-column:1;
}
.grid-item:nth-child(even)  {
  grid-column:2;
}

/* if 8 items (16) , send odds and evens them to their next respective columns */
.grid-item:nth-last-child(16):first-child~:nth-child(8) ~ .grid-item:nth-child(odd)  {
  grid-column:3;
}
.grid-item:nth-last-child(16):first-child~:nth-child(8) ~ .grid-item:nth-child(even)  {
  grid-column:4;
}

<section class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">Item 1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">Item 4</div>  
  <div class="grid-item">5</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">Item 8</div>
</section>

从最后一个片段中，您可以重复更新 .grid-item的规则：nth-​​last-child（xx）：first-child〜：nth-​​child（x），带有子项目的测试量它的

---

JavaScript也可以轻松地帮助将元素设置为特定的列。

let item = document.querySelectorAll(".grid-item");
i = 0;
let evenodd = (item.length/2)%2; // to make first col higher if amount of item not balanced
for (let e of document.querySelectorAll(".grid-item")) {
  i++;
  if (i >  item.length / 2 + evenodd ) {
    let pos = i;
    let odd = pos % 2;
    if (odd == 1) {
      e.classList.toggle("col3");
    } else {
      e.classList.toggle("col4");
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: 48px 1fr 48px 1fr;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
  grid-auto-flow: row dense;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

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

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


/* class will beassigned via javascript */

.grid-item.col3 {
  grid-column: 3;
}

.grid-item.col4 {
  grid-column: 4;
}

<section class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">Item 1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">Item 9</div>
</section>

Answer 2

我已经更改了您的布局以实现您想要的东西。就像您说的那样，有很多解决方案，在这里您有我的！希望它有帮助。

总而言之，我已经使用了Display Flex，而不是将布局分为两个列（移动第一策略），这些布局将在移动屏幕中的另一个下方打印出一个，然后通过媒体查询更改为另一个。

这是我的代码：

.flex {
  background-color: orange;
  border: 1px solid black;
}
.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}
.row {
  display: flex;
  justify-content: start;
  align-items: center;
}
.row div {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
  text-align: center;
}
.row .counter {
  max-width: 48px;
}
.row .item {
  flex: 1;
}

@media(min-width: 768px) {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .column {
    flex: 1;
  }
}

<section class="flex">
  <div class="column">
    <div class="row">
      <div class="counter">1</div>
      <div class="item">Item 1</div>
    </div>
    <div class="row">
      <div class="counter">2</div>
      <div class="item">Item 2</div>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <div class="counter">3</div>
      <div class="item">Item 3</div>
    </div>
    <div class="row">
      <div class="counter">4</div>
      <div class="item">Item 4</div>
    </div>
  </div>
</section>