如何使网格布局垂直增长

Question

我想制作一个像下面一样垂直生长的网格外观，
 

是否存在垂直增长的默认布局，目前我正在使用display:grid layout

＆＃13;

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-item {
  text-align: center;
}

＆＃13;

<div class="grid-container">
  <div class="grid-item">item 1</div>
  <div class="grid-item">item 2</div>
  <div class="grid-item">item 3</div>
  <div class="grid-item">item 4</div>
  <div class="grid-item">item 5</div>
  <div class="grid-item">item 6</div>
  <div class="grid-item">item 7</div>
  <div class="grid-item">item 8</div>
  <div class="grid-item">item 9</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但它变得水平。

Answer 1

你应该使用

grid-auto-flow: column;

下面是完整的CSS代码

 .grid-container {
        display: grid;
        grid-template-rows: repeat(4, 100px);
        grid-gap: 10px;
        grid-auto-flow: column;
    }

    .grid-item {
      /* other css here */
    }

您可以查看演示here