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

Contact Get in touch