How to use CSS3 Multiple Columns
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:
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- 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
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.