Cookies
We use cookies to give you the best possible experience on our website.
Accept All Cookies
Find out more
Cookie Portal
Manage and find out more about the cookies used on this website.
View Cookie Settings
Read Cookie Policy

Accept All Cookies and Close
Close Without Saving
< Back
This website has 3 types of cookies:
Your preferences will not take affect until the next page loads or this page is reloaded.
Strictly Necessary Cookies
Feature Cookies
Performance Cookies
Save and Close
< Back
< Back
Cookie Policy
< Back

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.


0 comments

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