CSS правильный порядок li для разметки нескольких столбцов - PullRequest
Новая
       38

CSS правильный порядок li для разметки нескольких столбцов

0 голосов
/ 12 декабря 2018

У меня есть следующий код, и я пытаюсь найти лучший способ сделать необходимые 4 столбца. 

<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>

Обычно я хотел бы сделать это с помощью CSS ниже, но это не поддерживаетli в правильном порядке (первые 3 li в первом столбце). 

 .first-column, .second-column, .third-column, .forth-column {
   width:25%;
   float: left; 
 }

1 Ответ

0 голосов
/ 12 декабря 2018

Звучит как сетка CSS: 

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.first-column {
  grid-column: 1;
}

.second-column {
  grid-column: 2;
}

.third-column {
  grid-column: 3;
}

.forth-column {
  grid-column: 4;
}
<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>
...