两个网格列可以在灵活的网格中具有反向自动行顺序吗？

Question

我有一个网格，其中有两列和两个不同大小 (3fr 6fr) 重复的自动行。有谁知道如何更改网格第二列（6fr 3fr）中行的顺序？所以这必须是灵活的，无论我在 grid-container 中放入多少项目，左边列的行顺序必须是 3fr 6fr，右边 6fr 3fr（所以 grid-area，grid-column，order may在这里不合适）。预先感谢您的帮助...

代码：


<div class="grid-container">
  
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>

</div>



.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 3fr 6fr;
  grid-gap: 5px;
  max-width: 60%;
  margin: 0 auto;
}

.grid-item {
  background-color: lightblue;
  padding: 30px;
}

代码笔：

https://codepen.io/illestoth84/pen/LYywZgP

Answer 1

您从仅 3fr 行开始，然后使用第 n 个子项公式来判断哪些项目到 span 2 行。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 3fr;
  grid-gap: 5px;
  max-width: 60%;
  margin: 0 auto;
}

.grid-item {
  background-color: lightblue;
  padding: 10px;
}

.grid-container :nth-child(4n-2),
.grid-container :nth-child(4n-1) {
  grid-row: span 2
}

<div class="grid-container">

  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>

</div>

两个网格列可以在灵活的网格中具有反向自动行顺序吗？

Can two grid-columns have reverse auto-rows order in a flexible grid?

html

css

css-grid