Question

典型的CSS网格布局将项目从左到右放置在网格中，然后包装到下一行，类似于在一系列块元素上使用float:left。

我想垂直显示（N）个项目，然后开始一个新列。这可能吗？

当前，我使用JavaScript进行此操作，在第N个项目后插入</div><div>标签，但希望有CSS解决方案。

例如：给定一个要在3列中显示的24个项目的字母顺序列表。 8行x 3列。

项目1-8将显示在第1列中，9-16将显示在第2列中，最后17-24将显示在第3列中。

 1 | 9  | 17

 2 | 10 | 18

 3 | 11 | 19

and so on...

 8 | 16 | 24

Answer 1

这是我的解决方案：

.outer-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 300px;
    flex-wrap: wrap;
}

.box-1 {
  width: 30px;
  height: 30px;
  background: yellow;
  border: 1px solid red;
}

.box-2 {
  width: 30px;
  height: 30px;
  background: orange;
  border: 1px solid red;
}

<div class="outer-1">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-1">3</div>
  <div class="box-2">4</div>
  <div class="box-1">5</div>
  <div class="box-2">6</div>
  <div class="box-1">7</div>
  <div class="box-2">8</div>
  <div class="box-1">9</div>
  <div class="box-2">10</div>
  <div class="box-1">11</div>
  <div class="box-2">12</div>
  <div class="box-1">13</div>
  <div class="box-2">14</div>
  <div class="box-1">15</div>
  <div class="box-2">16</div>
  <div class="box-1">17</div>
  <div class="box-2">18</div>
  <div class="box-1">19</div>
  <div class="box-2">20</div>
  <div class="box-1">21</div>
  <div class="box-2">22</div>
  <div class="box-1">23</div>
  <div class="box-2">24</div>
  <div class="box-1">25</div>
  <div class="box-2">26</div>
  <div class="box-1">27</div>
  <div class="box-2">28</div>
  <div class="box-1">29</div>
  <div class="box-2">30</div>
  <div class="box-1">31</div>
  <div class="box-2">32</div>
</div>

Answer 2

如果不需要支持IE 9及更低版本，则可以使用column-count。

Removed

ul {
  column-count: 3;
}

li {
  list-style: none;
}

Answer 3

grid-auto-flow: column怎么样？

.container {
  display: grid;
  grid-template-columns: auto;
  /* max 8 rows down before spilling to next column. */
  grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px;
  grid-auto-flow: column;
}

用块元素填充.container ...它应该作为行向下流入，并根据需要添加列。

以行顺序而不是列顺序显示CSS网格项

3 个答案: