css - 固定的网格自动流列数 : column

Question

我需要制作一个刚好有四列的网格布局，并将元素向下而不是向右排序。这是我的出发点:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>

预期输出是

1  5  9
2  6  10
3  7  11
4  8  12

如果添加了第 13 个元素，则可以接受:

1  6  11           1  6  10
2  7  12           2  7  11
3  8  13     or    3  8  12
4  9               4  9  13
5  10              5

如果只有三个 div，那么我会期望

1  2  3

使用除 display: grid 之外的东西也可以，尽管我不能对标记进行太多更改。

Answer 1

您可以使用 column-count: 3;而不是 display: grid并添加 display: inline-block到子元素。

.wrapper {
  column-count: 3;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: inline-block;
  width: 100%;
  margin: 5px;
  box-sizing: border-box;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
  <div class="box">13</div>
</div>