Is there a way to break a list into columns

Question

My webpage has a  skinny  list  for example  a list of 100 items of one word in length each  To reduce scrolling  I want to present this list in two or even four columns on the page  How should I do this with CSS    x000D   x000D   lt ul gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    I prefer the solution to be flexible so that if the list grows to 200 items  I don t have to do a lot of manual adjustments to accommodate the new list

User · Answer

2021 - keep it simple  use CSS Grid Lots of these answers are outdated  it s 2020 and we shouldn t be enabling people who are still using IE9  It s way more simple to just use CSS grid  The code is very simple  and you can easily adjust how many columns there are using the grid-template-columns  See this and then play around with this fiddle to fit your needs   x000D   x000D   grid-list     display  grid    grid-template-columns  repeat 4  1fr     x000D   lt ul class  grid-list  gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt     lt li gt item lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

This answer doesn t necessarily scale but only requires minor adjustments as the list grows  Semantically it might seem a little counter-intuitive since it is two lists  but aside from that it ll look the way you want in any browser ever made    x000D   x000D  ul   x000D    float  left  x000D    x000D   x000D  ul  gt  li   x000D    width  6em  x000D    x000D   lt  -- Column 1 -- gt  x000D   lt ul gt  x000D     lt li gt Item 1 lt  li gt  x000D     lt li gt Item 2 lt  li gt  x000D     lt li gt Item 3 lt  li gt  x000D   lt  ul gt  x000D   lt  -- Column 2 -- gt  x000D   lt ul gt  x000D     lt li gt Item 4 lt  li gt  x000D     lt li gt Item 5 lt  li gt  x000D     lt li gt Item 6 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

If you are looking for a solution that works in IE as well  you could float the list elements to the left  However  this will result in a list that snakes around  like this   item 1   item 2   item 3 item 4   item 5   Instead of neat columns  like   item 1   item 4 item 2    item 3      The code to do that would be   ul li     width 10em    float left      You could add a border-bottom to the lis to make the flow of the items from left to right more apparent

User · Answer

I ve found that  currently  Chrome  Version 52 0 2743 116 m  has tons of quirks and issues with css column-count regarding overflow items and absolute positioned elements inside items  especially with some dimensions transitions    it s a total mess and cannot be fix  so I tried tackling this through simple javascript  and had created a library which does that - https   github com yairEO listBreaker  Demo page

User · Answer

Here is what I did   x000D   x000D  ul   x000D        display  block  x000D        width  100   x000D    x000D   x000D  ul li  x000D      display  block  x000D      min-width  calc 30  - 10px   x000D      float  left  x000D    x000D   x000D  ul li nth-child 2n   1   x000D      clear  left  x000D    x000D   lt ul gt  x000D     lt li gt 1 lt  li gt  x000D     lt li gt 2 lt  li gt  x000D     lt li gt 3 lt  li gt  x000D     lt li gt 4 lt  li gt  x000D     lt li gt 5 lt  li gt  x000D     lt li gt 6 lt  li gt  x000D     lt li gt 7 lt  li gt  x000D     lt li gt 8 lt  li gt  x000D     lt li gt 9 lt  li gt  x000D     lt li gt 0 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

The mobile-first way is to use CSS Columns to create an experience for smaller screens then use Media Queries to increase the number of columns at each of your layout s defined breakpoints    x000D   x000D  ul   x000D    column-count  2  x000D    column-gap  2rem  x000D    x000D   media screen and  min-width  768px     x000D    ul   x000D      column-count  3  x000D      column-gap  5rem  x000D      x000D    x000D   lt ul gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D     lt li gt Item lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

If you can support it CSS Grid is probably the cleanest way for making a one-dimensional list into a two column layout with responsive interiors    x000D   x000D  ul   x000D    max-width  400px  x000D    display  grid  x000D    grid-template-columns  50  50   x000D    padding-left  0  x000D    border  1px solid blue  x000D    x000D   x000D  li   x000D    list-style  inside  x000D    border  1px dashed red  x000D    padding  10px  x000D    x000D   lt ul gt  x000D     lt li gt 1 lt  li gt  x000D     lt li gt 2 lt  li gt  x000D     lt li gt 3 lt  li gt  x000D     lt li gt 4 lt  li gt  x000D     lt li gt 5 lt  li gt  x000D     lt li gt 6 lt  li gt  x000D     lt li gt 7 lt  li gt  x000D     lt li gt 8 lt  li gt  x000D     lt li gt 9 lt  li gt  x000D   lt ul gt  x000D   x000D   x000D    These are the two key lines which will give you your 2 column layout  display  grid  grid-template-columns  50  50

User · Answer

The CSS solution is  http   www w3 org TR css3-multicol   The browser support is exactly what you d expect    It works  everywhere  except Internet Explorer 9 or older  http   caniuse com multicolumn  ul       -moz-column-count  4      -moz-column-gap  20px      -webkit-column-count  4      -webkit-column-gap  20px      column-count  4      column-gap  20px      See  http   jsfiddle net pdExf   If IE support is required  you ll have to use JavaScript  for example   http   welcome totheinter net columnizer-jquery-plugin   Another solution is to fallback to normal float  left for only IE  The order will be wrong  but at least it will look similar   See  http   jsfiddle net NJ4Hw    lt  -- if lt IE 10  gt   lt style gt  li       width  25       float  left    lt  style gt   lt   endif -- gt    You could apply that fallback with Modernizr if you re already using it

User · Answer

If you want a preset number of columns  you can use column-count and column-gap  as mentioned above   However  if you want a single column with limited height that would break into more columns if needed  this can be achieved quite simply by changing  display to flex   This will not work on IE9 and some other old browsers  You can check support on Can I use   x000D   x000D   lt style gt  x000D    ul   x000D      display  -ms-flexbox               IE 10    x000D      display  -webkit-flex              Safari 6 1   iOS 7 1     x000D      display  flex  x000D      -webkit-flex-flow  wrap column     Safari 6 1     x000D      flex-flow  wrap column  x000D      max-height  150px                  Limit height to whatever you need    x000D      x000D   lt  style gt  x000D   x000D   lt ul gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D       lt li gt Item lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[css] Is there a way to break a list into columns?

2021 - keep it simple, use CSS Grid

Examples related to css

Examples related to html-lists