There are some features in CSS3 which don't have much attention, one of them being CSS3 Multiple Columns I hope that this post will give you a solid introduction to the module. We will look at all of these properties:

  1. column-count
  2. column-gap
  3. column-rule-style
  4. column-rule-width
  5. column-rule-color
  6. column-rule
  7. column-span
  8. column-width

Starting our project

To get going I have wrapped a few headings and a couple of paragraphs of text inside an article HTML tag. Then I have added some basic styling and most importantly I have used this CSS property on the article tag: columns: 3;

In full our article has these properties: article { columns: 3; line-height: 1.5em; font-size: 1em; }

Please note I am also using autoprexifer to save typping it out over and over again, you can click on 'view complied' to see the full verison

So what does the 'columns' property do? It specifies the amount of columns there should be inside the container in this case 3.


Column gap is the amount of spacing between each column. This could be useful in creating more white space allowing each column to 'breathe'. In the above example our article now uses these CSS rules: article { columns: 2; column-gap: 80px; line-height: 1.5em; font-size: 1em; }

Column Rule

Column Rule Style

The column-rule-style property defines how the border should be, there is plenty to choose from:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • initial
  • inherit
  • hidden
  • none

Column Rule Width

The width is how thick the border should be: column-rule-width: ;

Column Rule Color

Finally the color of the border: column-rule-color: ;

Column Rule

So now our article has these CSS properties: article { columns: 2; column-gap: 80px; line-height: 1.5em; font-size: 1em; column-rule-style: dotted; column-color: blue; column-width: 4px; }

However we can save some space and make this more efficent by using the column-rule property and merge the column-rule-style, column-color and color-width. So now our article can be: article { columns: 2; column-gap: 80px; line-height: 1.5em; font-size: 1em; column-rule: dotted blue 4px; }

Column Span

Column span is really useful in achiving print style designs. For example the title of an article might span all three columns or if you have a blockquote it may span two columns.

In our example I have increased the header font and spanned it across all columns.

Column Width

The column-width property is the width of each column

Media queries and how we can adapt for mobile

Now we know all the CSS propties we can use we can now take it a step forward and consider media queries. We could use media queries to change the amount of columns, the width of columns or the spacing between columns depending on the query. I would suggest not using columns on mobile devices.

Final Thoughts

The CSS3 multiple colomuns module is bringing print and digital together, we can now create magazine style layouts on digital devices and improve the reading experience. It is really simple to use the multiple columns and it doesn't take too much to get going right now.