如何在CSS多列布局中交换列和行？

Question

我需要通过CSS或JS用块填充网格。

我当前的代码：

.vacancies {
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    text-align:justify;
}
.vacancies li {
    width: 100%;
    overflow: hidden;
}

.vacancy {
    width: inherit;
}

当我得到新的消息(网格的块)时，我把它加到ul元素前面。但我提出的问题是，网格是这样填满的：

​

​

我需要它像这样：

​

​

有没有办法只使用CSS，或者我需要用JavaScript手动刷新网格？

Answer 1

您可以使用像这样的flexbox结构

​

.main {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: space-between;
      align-items: space-between;
      flex-wrap: wrap; 
}

.main div {
      width: 30%;
      border: 1px solid red; 
      margin-bottom: 10px;
}

<div class="main">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

</div>

​