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

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

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

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

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

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

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

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_

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_

<ul>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
  <li>Item</li>_x000D_
</ul>

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

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_

<ul>_x000D_
  <li>1</li>_x000D_
  <li>2</li>_x000D_
  <li>3</li>_x000D_
  <li>4</li>_x000D_
  <li>5</li>_x000D_
  <li>6</li>_x000D_
  <li>7</li>_x000D_
  <li>8</li>_x000D_
  <li>9</li>_x000D_
<ul>

_x000D_

These are the two key lines which will give you your 2 column layout

display: grid;
grid-template-columns: 50% 50%;

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.

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

The answer is

Demo page

2021 - keep it simple, use CSS Grid

Examples related to css

Examples related to html-lists

Tags