CSS Columns
Tags: css, webdesign, examples
Published: 2018-03-02 10:17:37

---
title: "CSS Columns"
published: true
description: All there is to know about CSS columns property
tags: css,web design,examples
canonical_url: https://kolosek.com/css-columns/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7a09f2u5dw3rofbkvh5t.png

---

Text breaking option is not the most popular text option ever since magazine layout ([text underline](https://kolosek.com/css-text-underlined/) is, for example, much more interesting). Just like in printing design, there are columns in web design too. The best and clearest way to use it is **column option in CSS**. 

It is boring, content and design-wise, for text content to be extended over the full web page, so this is rare to see. Please note that the blog content is left out of this because of its nature.

So, textual content on the web is organized in [smaller width elements](https://kolosek.com/css-position-relative-vs-position-absolute/) and because of that, there’s no need for columns. After all those facts listed, 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 into one of the next element &#60;p&#62;, &#60;div&#62;, &#60;h&#62;, &#60;ul&#62; and &#60;ol&#62;**. If the height of the columns isn’t defined, the content divided into columns defines height.

## Examples

This example represents breaking content into 2 column.

(I used [gradient](https://kolosek.com/everything-you-need-to-know-about-gradient/) to present content flow)

        <style>
            div{
                -webkit-column-count: 2; /* Chrome, Safari, Opera */
                -moz-column-count: 2; /* Firefox */
                column-count: 2;          
                }
        </style>
        
![CSS columns example with content that contain all columns width](http://kolosek.com//content/images/2018/02/Blog_-_CSS_columns_-_1.png)

This example represents breaking content into defined width column with 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>
        
        
![CSS columns example with content that contain all columns width](http://kolosek.com/content/images/2018/02/Blog---CSS-columns---2.png)

This example represents content staggered into 3 columns with 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>
        
![CSS columns example with content that contain all columns width](http://kolosek.com/content/images/2018/02/Blog---CSS-columns---3.png)

The last example represents content into columns and element which include all 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>
        
![CSS columns example with content that contain all columns width](http://kolosek.com/content/images/2018/02/Blog---CSS-columns---4.png)

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


This post is originally published on [Kolosek blog](https://kolosek.com/css-columns/).