How can I swap columns and rows in a CSS multicolumn layout?

Question

I need to fill up the grid with blocks via CSS or JS.

My current code:

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

When I get new message (block of grid), I prepend it to ul element. But I issue the problem, that the grid fills up like that:

And I need it like that:

Is there the way to do it using only CSS, or I need to manually refresh the grid with JavaScript?

Please add your HTML to create a [mcve]. – TylerH Aug 09 '21 at 15:48 — TylerH, Aug 09 '21 at 15:48

score 0 · Answer 1 · answered Aug 09 '21 at 16:03

You can use a flexbox structure like this

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

How can I swap columns and rows in a CSS multicolumn layout?

1 Answers1