1. Code
  2. HTML & CSS

Quick Tip: The Multi-Column CSS3 Module

Scroll to top
Read Time: 1 min
This post is part of a series called CSS3 Mastery.
Quick Tip: A Crash-Course in CSS Media Queries
Design a Prettier Web Form with CSS 3

For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! The world will not end if IE users see one longer paragraph. I'll show you how to use this helpful module in today's video quick tip.

Final Product

  • column-count: The desired number of columns for the element.
  • column-gap: The padding between each column.
  • column-rule: The divider for each column; can be used to specify a border.
  • column-width: Used to specifically state the width of each column.

Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count.

Do you use CSS columns in your projects? If no, why not?

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.