Divvying up list items between columns
This has got to be one of the absolute best cool CSS functions I’ve had the pleasure of using. Getting columns to line up properly and even distribute list items between them? Frickin awesome.
How many times have you had a fat list of things going down the page and it looks just funky? You then feel obligated to put in a second or third column to make it look decent. Then you sit there and start counting out items for each column? Then your client changes their mind about a few items here and there and you have to redo the lists in all the columns? If you’re like me, plenty of times.
This handy little CSS blit will automatically divide the list items up between the given number of columns. Now it could get interesting based on your responsive expectations, but with this kind of code, I suspect you should be able to handle it!
UPDATED: Nov 13, 2014 – Discovered that although I changed my code to handle all the browsers, I hadn’t updated it here. New version that works across all tested browsers. Wasn’t comprehensive, but should work on pretty much anything.
#container{
width:95%;
}
#container ul{
border:1px solid #ccc;
padding:5px;
list-style:none;
-moz-column-count:3; /* Firefox */
-moz-column-gap:20px;
-moz-column-rule-width:1px;
-moz-column-rule-style:outset;
-moz-column-rule-color:#ccc;
-webkit-column-count:3; /* Safari and Chrome */
-webkit-column-gap:20px;
-webkit-column-rule-width:1px;
-webkit-column-rule-style:outset;
-webkit-column-rule-color:#ccc;
column-count:3;
column-gap:20px;
column-rule-width:1px;
column-rule-style:outset;
column-rule-color:#ccc;
}
See the original over at http://www.mustbebuilt.co.uk/2014/02/23/dividing-dynamic-content-equally-into-columns/
Follow
