CSS correct li order for multiple column layout

Question

I have the following code and am trying to find out the best way to make the 4 columns necessary .

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

Usually I would go about this with the css below, but this doesn't maintain li in the correct order (the first 3 li's are in the first column).

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

What have you tried? Where did you get stuck? What went wrong, or didn’t work? — David Thomas, Dec 12 '18 at 18:30
Hi and thanks for your time, Ive just edited the question with what ive tried. — JimWids, Dec 12 '18 at 18:35
You can find similar answer here as this may look like its duplicate forum: https://stackoverflow.com/questions/42613350/how-can-i-create-multi-columns-from-a-single-unordered-list — Xion, Dec 12 '18 at 18:38
Unfortutely the solution on that post is similar to the css posted in the question in that it doesn't put the li in the correct order required. — JimWids, Dec 12 '18 at 18:40

score 0 · Accepted Answer · answered Dec 12 '18 at 19:11

Sounds like a CSS grid job:

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>

CSS correct li order for multiple column layout

1 Answers1