如何设置网格元素旋转

Question

请教一下，如何设置网格元素从下到上的顺序，即现在有1到10两列，默认顺序是从左到右。我需要这样做。第一列从1...5（从上到下）；第二列6...10（从上到下）。

.main {
  display: flex;
  justify-content: center;
  width: 100%; 
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px;  
}

<div class="main">
  <div class="content">
    <div class="grid_element">
    1
    </div>
    <div class="grid_element">
    2
    </div>
    <div class="grid_element">
    3
    </div>
    <div class="grid_element">
    4
    </div>
    <div class="grid_element">
    5
    </div>
    <div class="grid_element">
    6
    </div>
    <div class="grid_element">
    7
    </div>
    <div class="grid_element">
    8
    </div>
    <div class="grid_element">
    9
    </div>
    <div class="grid_element">
    10
    </div>
  </div>
</div>

Answer 1

你必须设置一个 明确 行数，然后告诉网格以列的形式流动。

.main {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}

<div class="main">
  <div class="content">
    <div class="grid_element">
      1
    </div>
    <div class="grid_element">
      2
    </div>
    <div class="grid_element">
      3
    </div>
    <div class="grid_element">
      4
    </div>
    <div class="grid_element">
      5
    </div>
    <div class="grid_element">
      6
    </div>
    <div class="grid_element">
      7
    </div>
    <div class="grid_element">
      8
    </div>
    <div class="grid_element">
      9
    </div>
    <div class="grid_element">
      10
    </div>
  </div>
</div>

Answer 2

另一个不设置行数的想法。

.main {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow:dense;
  grid-gap: 50px;
}

.content > * {
  grid-column:1;
}
.content > *:nth-child(n + 6) {
  grid-column:2;
}

<div class="main">
  <div class="content">
    <div class="grid_element">
      1
    </div>
    <div class="grid_element">
      2
    </div>
    <div class="grid_element">
      3
    </div>
    <div class="grid_element">
      4
    </div>
    <div class="grid_element">
      5
    </div>
    <div class="grid_element">
      6
    </div>
    <div class="grid_element">
      7
    </div>
    <div class="grid_element">
      8
    </div>
    <div class="grid_element">
      9
    </div>
    <div class="grid_element">
      10
    </div>
  </div>
</div>