CSS Columns

One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a better properties available. One of the newer CSS properties at our disposal is the column set of properties; these properties allow us to create columned containers without the hassle of floats, clears, margins, and more.

The CSS

CSS' column feature contains a few different properties that work together to create the desired column set:

column-count : number of columns desired

: number of columns desired column-gap : gap between columns

: gap between columns column-width : suggests an optimal column width; not an absolute value that will be used, but will be the basis for the browser's own calculations

: suggests an optimal column width; not an absolute value that will be used, but will be the basis for the browser's own calculations column-rule-width

column-rule-style

column-rule-color

column-span : allows elements to span multiple columns

: allows elements to span multiple columns column-fill : how contents are partitioned into columns

For the purposes of elegant styling, you'll at least want to use column-count and column-gap:

/* 3 columns of list items will display with a 10 pixel gap between columns */ ul.col-3 { column-count: 3; column-gap: 10px; }

If you're looking to add column rules, those are easy to add as well:

/* 3 columns of list items will display with a 10 pixel gap between columns, gold column rule */ ul.col-3 { column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0; }

Specific elements will even span columns if you so choose:

/* Assume this HTML: <div class="col-3"> <h3>Heading!</h3> <div>Section 1</div> <div>Section 2</div> <div>Section 3</div> <div>Section 4</div> <div>Section 5</div> <div>Section 6</div> <div>Section 7</div> <div>Section 8</div> <div>Section 9</div> <div>Section 10</div> <div>Section 11</div> <div>Section 12</div> </div> */ div.col-3 { column-count: 3; column-gap: 5px; } div.col-3 h2 { column-span: all; text-align:center; background: #eee; }

Simply CSS columns -- exactly what we've been looking for!

Using CSS columns has its advantages: you don't need to do your own math, you can avoid modulus-based calculations on the server side for breaking based on content length, and if nothing else, you have a semantic way of creating columned layouts!