1

I have some simple HTML and CSS to split a list into 4 columns. Instead of the normal behavior where it fits each list item into whichever column has enough space for it, I want to force it to put each list item into its own column.

So in my example <li>Column 1</li> will always only be in the 1st column. <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li> will always only be in the 2nd column. Same with column 3 and 4.

Is there a way to accomplish this while using the columns property?

ul.data-points {
  columns: 4;
  column-gap: 20px;
}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Gavin
  • 7,544
  • 4
  • 52
  • 72
  • Why not simply use flexbox ? – Rainbow Mar 22 '20 at 14:32
  • @ZohirSalak Because in order to have equal spacing between equal width columns in flexbox, you need to set x margins on the cells and then a negative margin on the flex container in order to remove the far left and far right margins while keeping the columns the same width. It feels hack-ish to me, so if list columns could be made to have 1 list item per column, it would be a much cleaner way to have equal width columns and equal width spacing between them. – Gavin Mar 23 '20 at 07:14
  • 1
    If you want space in between you can use margins on the children just how you're using `column-gap: 20px;` it will give out the exact same layout only better, here's a [demo](https://jsfiddle.net/yhq8m52u/) – Rainbow Mar 23 '20 at 12:14
  • @ZohirSalak thanks for that example! I obviously don't know enough about flexbox, because that works great and it's nice and simple... – Gavin Mar 23 '20 at 13:36

2 Answers2

2

This is more suitable for CSS grid:

ul.data-points {
  display:grid;
  grid-auto-flow:column;
  column-gap: 20px;
}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

as answered a couple of hours ago. at 2 column lists gets separated by its heading

set li to inline-block to avoid it to spray through columns and a bottom padding or margin to hopefully push next one to next column .

However, it looks like a typical grid or flex layout, not CSS Column .

demo below demonstrates how not efficient css column is here.

ul.data-points {
  columns: 4;
  column-gap: 20px;
}
li {display:inline-block;width:100%;margin-bottom:100%;}
<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>
Community
  • 1
  • 1
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • it works without inline-block on my side. With inline-block It's scrambled (testing on Chrome) – Temani Afif Mar 22 '20 at 13:58
  • @TemaniAfif margin-bottom makes it work on itsel in ff, inline-block is to avoid to break li through columns . the css break rules never work inside column ;) ... chrome doesn't handle the margin trick :( however it is a flex or grid job ;) – G-Cyrillus Mar 22 '20 at 13:59
  • removing inline-block make it works in all the browser when testing (not sure about different OS, testing on Windows) – Temani Afif Mar 22 '20 at 14:43
  • This is only displaying as a 2 column layout – Gavin Mar 22 '20 at 17:53
  • @Gavin , because you run Chrome, this answer is to demonstrate that column CSS is not the option to use, this is a grid or flex layout , **not CSS column** take care. – G-Cyrillus Mar 22 '20 at 18:56