How can i order colum css

Question

I'm trying to create a layout like below

I have an object like this

[1]
[2]
[3]
[4]

But when i break these column into 2 columns i have this result https://jsfiddle.net/juh7fe8o/1/

[1] [3] 
[2] [4]

The expected result should be like this

[1] [2]
[3] [4]

How can i order these columns? All of my elements have a index that could be used

Does this answer your question? [How to display an unordered list in two columns?](https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns) — Shimi, Dec 03 '20 at 19:07
I think this is duplicated with https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns — Shimi, Dec 03 '20 at 19:07

score 0 · Answer 1 · answered Dec 03 '20 at 19:09

0

you may use grid instead column:

ul {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap: 20px;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

answered Dec 03 '20 at 19:09

G-Cyrillus

score 0 · Answer 2 · answered Dec 03 '20 at 23:53

0

You can use flexbox:

ul {
  display:flex;
  flex-wrap:wrap;
}
li {
  width:50%;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

answered Dec 03 '20 at 23:53

nothing

2 Answers2