CSS3 Multiple column layout

Ben

Ben
Written on 12th July 2018

Multiple column layout is a CSS3 feature that allows us to define a number of columns we want our block of text to be split up into. The two most commonly used properties are column-count and column-width. Count allowing you to set how many columns will appear and width setting a minimum desired width each column should be.

What is Multiple column layout?

Multiple column layout is a CSS3 feature that allows us to define a number of columns we want our block of text to be split up into. The two most commonly used properties are column-count and column-width. Count allowing you to set how many columns will appear and width setting a minimum desired width each column should be.

Many other properties are available:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width
  • column (short hand)

Typically dynamic content is very difficult to place into two columns and would be hacked with floats/width and javascript. This becomes evermore difficult when the content is a list contained within the ul tag. So how can we use Multiple column layout to fix this?

How it has been used

The Multiple column layout has been applied on the ul and set to a two column layout. This separates the list into two sections and will auto re arrange when new items are added. By utilizing this CSS3 technique we are able to keep the list items in order, instead of floating and able to keep the markup/css to a minimum.

Being a CSS3 feature doesn't mean low browser support. Using prefixes, columns will be supported on all modern browsers back to IE 9:
https://caniuse.com/#feat=multicolumn

The official documentation with more links and examples can be found:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

Join the conversation

 
  
 

Find out more about how your personal data is used in our privacy policy.


Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button below and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch
Get in touch