如何设置网格元素旋转答案

【问题标题】：how can i set grid element rotation如何设置网格元素旋转
【发布时间】：2020-06-08 17:00:00
【问题描述】：

请告诉我如何设置网格元素从下到上的顺序，即现在有两列从1到10，默认顺序是从左到右。我需要这样做： 1..5 的第一列（从上到下）；第 2 列 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>

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这很好:-)