strange behaviour of css columns

user_11026903 0
Viewed 105

Anyone have idea, why when I using css columns it behave very strange? I mean i've got

 ul{    
        columns: 4;
        column-gap: 100px;
        column-rule: 1px solid #eaeef6;
      }
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    </ul>

My expectation is to display it like that:

A|B|C|D|
E| | | |

But i've got that:

A|C|D| |
B| |E| |

Why? thanks

multiple-columns css html
2 Answers

I can suggest you use display: grid if that might help?

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

If you want it to wrap, you use media queries or flex ( flex-direction: row; flex-wrap: wrap ) but then you would kinda lose the column aspect of your "table" if that is supposed to be one.

Hopefully this helps

user_130543150

Maybe you're looking to set your grid up like this?

 ul{    
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 100px;
        column-rule: 1px solid #eaeef6;
      }
   <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    </ul>

user_111111190
Related