如何设置网格元素旋转

Question

请告诉我如何从下到上设置网格元素的顺序，即现在从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>

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>