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

【问题标题】：How can I swap columns and rows in a CSS multicolumn layout?如何在 CSS 多列布局中交换列和行？
【发布时间】：2021-08-10 00:03:35
【问题描述】：

我需要通过 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 手动刷新网格？

【问题讨论】：

请添加您的 HTML 以创建minimal reproducible example。

标签： javascript css css-multicolumn-layout

【解决方案1】：

你可以使用这样的弹性盒结构

.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>

【讨论】：