Изменить последовательность в Grid view

Question

С сервера приходит список айтемов:

<ul class="list">
  <li class="item">Select All</li>
  <li class="item">Civil Id</li>
  <li class="item">Salary Certificate</li>
  <li class="item">Salary Continuity Certificate</li>
  <li class="item">Birth Certificate</li>
  <li class="item">Residency Certificate</li>
  <li class="item">Proof of Employment</li>
  <li class="item">Card Bin</li>
</ul>

Айтемы должны располагаться в три колонки, как на рисунке.

Я применил Grid view,

.list{
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto;
}

однако их последовательность другая в таком расположении и выглядит сейчас вот так

Подскажите, как я могу перевернуть их расположение на grid view?

Answer 1

Пример 1

.list{
    column-count: 3;
}

<ol class="list">
  <li class="item">Select All</li>
  <li class="item">Civil Id</li>
  <li class="item">Salary Certificate</li>
  <li class="item">Salary Continuity Certificate</li>
  <li class="item">Birth Certificate</li>
  <li class="item">Residency Certificate</li>
  <li class="item">Proof of Employment</li>
  <li class="item">Card Bin</li>
</ol>

Пример 2

.list {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<ol class="list">
  <li class="item">Select All</li>
  <li class="item">Civil Id</li>
  <li class="item">Salary Certificate</li>
  <li class="item">Salary Continuity Certificate</li>
  <li class="item">Birth Certificate</li>
  <li class="item">Residency Certificate</li>
  <li class="item">Proof of Employment</li>
  <li class="item">Card Bin</li>
</ol>

БЛОГ НА HUSL

Изменить последовательность в Grid view

Ответы (1 шт):