Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Columns

DZone's Guide to

CSS Columns

A tutorial on how to customize columns on your site or web application using some simple CSS properties. Read on to get started!

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

The text breaking option has not been the most popular text option ever since the advent of the magazine layout. Just like in print design, there are columns in web design too. The best and clearest way to use it is the column option in CSS.

If you are interested in text underline option, which is much more attractive, check it here.

It is boring, content and design-wise, for text content to be extended over the full web page, so this is rare to see. For more about positions in CSS check this text.

So, textual content on the web is organized into smaller width elements and, because of that, there's no need for columns. Despite all of that, I needed columns last week on a design I've worked on, and it was fully justified (but left aligned).

Properties linked to the columns property are:

  • column-count - specifies the number of columns an element should be divided into.
  • column-width - specifies the width of the columns.
  • column-gap - specifies the gap between the columns
  • column-rule - sets the rule between the columns (it is a shorthand property for setting rule width, rule color, and rule style).
  • column-span - specifies how many columns an element should span across.Internet Explorer 9 (and earlier versions) and Firefox do not support column-span
  • column-fill - specifies how to fill columns (auto or balance).

The columns property alone will accept column-count, column-width, or both properties.

Let me explain these properties a little bit.

The column-width property specifies a suggested, optimal width for the columns. If the column-count is defined, the column-width value will be overridden.

The column-fill property is only available in Firefox. Content with column-fill balance will automatically balance content in a height-constrained multi-column layout. Other browsers will always fill columns sequentially when given a height constraint. If you want the same behavior through all browsers just set column-fill: auto.

Content that can be edited this way must be in one of these element: <p>, <div>, <h>, <ul> and <ol>.

If the height of the columns isn't defined, the content divided into columns defines the height of the column.

Examples

This example represents breaking content into two columns.

(I used gradient to present content flow)

    <style>
        div{
            -webkit-column-count: 2; /* Chrome, Safari, Opera */
            -moz-column-count: 2; /* Firefox */
            column-count: 2;          
            }
    </style>

This example represents breaking content into a column with a defined width that has a defined gap between them.

    <style>
        div{
            -webkit-column-width: 300px; /* Chrome, Safari, Opera */
            -moz-column-width: 300px; /* Firefox */
            column-width: 300px;      
            -webkit-column-gap: 150px; /* Chrome, Safari, Opera */
            -moz-column-gap: 150px; /* Firefox */
            column-gap: 150px;
            }
    </style>

This example represents content staggered into 3 columns with a defined rule between them.

<style>
        div{
            -webkit-columns: 3; /* Chrome, Safari, Opera */
            -moz-columns: 3; /* Firefox */
            columns: 3;      
            -webkit-column-rule: 1px solid #dbdbdb; /* Chrome, Safari, Opera */
            -moz-column-rule: 1px solid #dbdbdb; /* Firefox */
            column-rule: 1px solid #dbdbdb;
            }
    </style>

The last example represents content in columns and elements which include all the columns' width.

 <style>
        div{
            -webkit-columns: 3; /* Chrome, Safari, Opera */
            -moz-columns: 3; /* Firefox */
            columns: 3;      
            }
        h1{
            -webkit-column-span: all; /* Chrome, Safari, Opera */
            column-span: all;
            }
    </style>

I believe this is everything there is about the column property in CSS. Hope it helps!

Check out my text about text-underline in CSS here and other texts which describe different CSS options as comprehensive as this one: nesting,  relative font size, and CSS positions.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,css ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}