CSS Columns

By  on  

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
  • column-gap: 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
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span: 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!

Cloudinary

Recent Features

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

  • By
    Scrolling &#8220;Go To Top&#8221; Link Using Dojo

    One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go...

Discussion

  1. Alain Rivest

    This is awesome, looks nice in Chrome but it’s not working in Firefox… :(

  2. Sorry guys, forgot the browser prefix for Firefox; it’s there now!

    • Jacob Rask

      If you add an unprefixed version it will work in Opera and IE10 as well.

  3. Very cool, thanks for sharing! Side-note you should add a BufferApp share button to you site

  4. Mike Taylor

    You need to include non-prefixed properties too–Opera supports it prefixless. This is why preprocessors are a good thing. ;)

  5. Thomas

    This is nice for Text-Content, but you can’t really use it for “real layout” as alternative to grid systems – as it is not possible to declare which content elements should sit in which column.

    something like the following would be great to do with column layout, but doesn’t work as intended :(
    And all the other CSS3 layout modules (Grid, Flexbox, Template, ..) are not ready, so we just have to keep using float or inline-block

    
    left column
    center column
    right column
    
    
  6. David

    Awesome – just like to point out the code:


    div.col-3 h2 {
    column-span: all;

    should be h3, as you used h3 in the HTML.

    Sorry to be a bugger!

  7. Rolf

    I tried using this in an ongoing project but in the end ditched it because of the lack of browser support (so you have to do proper fallbacks still keeping the design) and because (as mentioned) mainly works best for text-only layout. I would probably use it for stuff with emphasis on text and if the target device is a mobile piece.

  8. Hi David,

    This looks really promising, especially for text heavy layouts, although it would be nice if it was supported universally across all major browsers. Its cool that headings can be spanned across multiple columns without having the need to use z-index or absolute positioning. However until any of these methods become more mainstream, I think I’ll stick to floating my elements when considering cross browser compatibility.

  9. There’s a jQuery fallback for early versions of IE with ‘Columnizer’ as I mentioned on a blog article a few weeks back (http://wp.me/p1V1Ia-3W).

  10. Jeroen

    For some reason, in my two column layout, the two columns don’t start at the same line. The first one is placed one line lower. As a newbie, I can’t figure out what’s causing it. :-( Do you have any ideas? Thanks!

  11. hi
    tried your example with IE it doesn’t work, but when I paste your code in w3schools try it section. it works .. any specific reason ??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!