我希望列中可以放置X数量的项目，并且我希望它们从位置0开始，并使用自动高度堆叠：
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
align-items:start;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.item-1{grid-column-start:1; grid-column-end:1; grid-auto-rows: auto;}
.item-2{grid-column-start:1; grid-column-end:1; grid-auto-rows: auto;}
.item-3{grid-column-start:2; grid-column-end:2; grid-auto-rows: auto;}
.item-4{grid-column-start:3; grid-column-end:3; grid-auto-rows: auto;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">1</div>
<div class="grid-item item-1">2</div>
<div class="grid-item item-3">3</div>
<div class="grid-item item-4">4</div>
</div>
</body>
</html>
JSfiddle
这是一幅我想要实现的图画：想要的结果图像
使用flex box，您可以执行以下操作：
.style {
border: 5px solid black;
}
.grid-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.grid-item {
height: 200px;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item {
width: 100%;
height: 50px;
}
.item-spe {
height: 50px
}<div class="grid-container">
<div class="grid-item">
<div class="item style"></div>
<div class="item style"></div>
<div class="item style"></div>
</div>
<div class="grid-item style"></div>
<div class="grid-item style item-spe"></div>
<div class="grid-item style"></div>
</div>