如何创建一个垂直排列的三列列表

Question

我有一个问题，使用display: grid样式的ul。列表应该如下图所示。图中的元素可以有不同的高度。预期行为

到目前为止，我已经添加了一个样式Ul: grid-template-columns: 1fr 1fr和grid-auto-flow: column。对于li元素，视列元素在哪个位置而定:

.wrapper {
margin: 0;
padding: 0;
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: columns;
row-gap: 10px;
column-gap: 10px;
}
.first-column {
grid-column: 1;
height: 200px;
background-color: skyblue;
}
.second-column {
grid-column: 2;
height: 500px;
background-color: aquamarine;
}
.third-column {
grid-column: 3;
height: 300px;
background-color: silver;
}

<ul class="wrapper">
<li class="first-column"></li>
<li class="first-column"></li>
<li class="second-column"></li>
<li class="second-column"></li>
<li class="third-column"></li>
<li class="third-column"></li>
</ul>

但是，这会导致行高度由行中最高的元素决定。如下图所示。

当前行为

Answer 1

我是这样做的:

.grid{
display: grid;
grid-template-columns: 100px 200px 100px;
column-gap: 50px; /* The gap you want */
}
.col{
display: grid;
grid-template-rows: repeat(4, 100px);
row-gap: 100px; /* The gap you want */
}
.col.spec{
grid-template-rows: repeat(3, 200px);
row-gap: 50px; /* The gap you want */
}
.elm{
width: 100%;
border: 1px solid black;
}

<div class="grid">
<div class="col">
<div class="elm"></div>
<div class="elm"></div>
<div class="elm"></div>
<div class="elm"></div>
</div>
<div class="col spec">
<div class="elm"></div>
<div class="elm"></div>
<div class="elm"></div>
</div>
<div class="col">
<div class="elm"></div>
<div class="elm"></div>
<div class="elm"></div>
<div class="elm"></div>
</div>
</div>

你可以随时调整你想要的样式和尺寸，但要确保它具有响应性。