Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS3

CSS3: Multiple Column Layout

4.98/5 (20 votes)
31 Aug 2016CPOL1 min read 20.5K  
Multiple column layout in CSS3

The name Multiple Column Layout suggests a new way to arrange the text like newspaper-wise, which has better flexibility for viewing the page for the viewers. Multi Column Layout is actually a module, with having block layout mode for smoothing definition of multiple columns of text.

Ummm… difficult to understand :( … Hmmm… same thing happening to me too :-(. Then, why to wait!!! Let’s check with some example.

This is the HTML code which we will use for demo purpose with adding below styles.

HTML
<!DOCTYPE html>
<html>
    <head>
        <style> 
            div {
                -webkit-column-count: 3; /* Chrome, Safari, Opera */
                -moz-column-count: 3; /* Firefox */
                column-count: 3;
            }
        </style>
    </head>

    <body>
        <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Pellentesque rutrum auctor egestas. Vivamus malesuada felis quis 
        ipsum dapibus sagittis. Maecenas quis tempor eros. 
        Pellentesque tempor ex vel dictum pharetra. Maecenas id hendrerit enim. 
        Phasellus a urna nec elit imperdiet mollis. Donec gravida augue ut aliquam accumsan. 
        Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et 
        malesuada fames ac turpis egestas. Proin orci elit, volutpat sed dapibus quis, 
        ornare a augue. Aliquam purus arcu, pharetra quis gravida eget, ultrices at est. 
        Donec sodales ac felis ac ullamcorper. Nullam ac tortor diam. 
        Mauris blandit quis enim nec luctus. 
        Curabitur pharetra libero auctor tincidunt scelerisque. 
        Aliquam sodales sagittis ipsum eget sodales. 
        Proin vel ante gravida, efficitur leo et, dignissim odio. 
        Vestibulum erat enim, suscipit id luctus sit amet, convallis sit amet erat. 
        Integer sagittis metus orci, sit amet condimentum elit pretium nec. 
        Phasellus quis metus nunc. Sed fringilla leo semper, tempor risus eget, elementum ipsum. 
        Curabitur at aliquet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Sed pretium nunc lacus, vel ultrices libero accumsan vitae. 
        In eleifend, velit non facilisis rhoncus, ligula felis aliquet tellus, 
        cursus bibendum sapien erat vitae est. Vivamus laoreet metus sed sapien venenatis accumsan. 
        Phasellus aliquam hendrerit felis. Sed semper fermentum feugiat. 
        Aliquam tempor volutpat lorem, ac tempor enim lacinia sed. 
        Mauris vulputate, mi semper aliquet lacinia, odio massa commodo lorem, 
        nec convallis mi urna vitae neque. Nunc leo mauris, gravida vitae tincidunt vel, 
        elementum ac sem. Aenean vel porttitor nisi. Donec aliquet ullamcorper risus ac vulputate. 
        Aliquam in eleifend augue. Cras mattis, neque in efficitur feugiat, mi orci euismod risus, 
        non bibendum leo tortor tincidunt ipsum. Morbi dapibus nisl eget sodales gravida. 
        Pellentesque facilisis nibh vel urna ultrices, ac tincidunt urna semper. 
        Integer tincidunt velit at dolor gravida, vitae gravida velit rhoncus. 
        Cras sollicitudin fermentum orci, vel bibendum arcu sodales non. </div>
    </body>
</html>

So, let’s go through the properties of Multiple Column Layout one by one to check how it works –

Multiple Column Properties

  1. column-count – Specifies the number of columns an element should be divided into:
    CSS
    column-count: number|auto|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }

    Screen Shot 2014-10-20 at 1.55.41 pm

  2. column-fill – Specifies how to fill columns:
    CSS
    column-fill: balance|auto|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    
        -moz-column-fill: auto; /* Firefox */
        column-fill: auto;
    }

    Screen Shot 2014-10-20 at 2.08.03 pm

  3. column-gap – Specifies the gap between the columns:
    CSS
    column-gap: length|normal|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    
        -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
        -moz-column-gap: 60px; /* Firefox */
        column-gap: 60px;
    }

    Screen Shot 2014-10-20 at 2.11.08 pm

  4. column-rule – A shorthand property for setting all the column-rule-* properties:
    CSS
    column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    
        -webkit-column-rule: 5px outset #16a085; /* Chrome, Safari, Opera */
        -moz-column-rule: 5px outset #16a085; /* Firefox */
        column-rule: 5px outset #16a085;
    }

    Screen Shot 2014-10-20 at 2.19.03 pm

  5. column-rule-color – Specifies the color of the rule between columns:
    CSS
    column-rule-color: color|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    
        -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
        -moz-column-gap: 60px; /* Firefox */
        column-gap: 60px;
    }

    Screen Shot 2014-10-20 at 2.26.54 pm

  6. column-rule-style – Specifies the style of the rule between columns:
    CSS
    column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
    CSS
    div {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 60px;
        -webkit-column-rule-style: dashed;
    
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 60px;
        -moz-column-rule-style: dashed;
    
        column-count: 3;
        column-gap: 60px;
        column-rule-style: dashed;
    }

    Screen Shot 2014-10-20 at 2.30.01 pm

  7. column-rule-width – Specifies the width of the rule between columns:
    CSS
    column-rule-width: medium|thin|thick|length|initial|inherit;
    CSS
    div {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 60px;
        -webkit-column-rule-style: outset;
        -webkit-column-rule-width: 20px;
        -webkit-column-rule-color: #16a085;
    
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 60px;
        -moz-column-rule-style: outset;
        -moz-column-rule-width: 20px;
        -moz-column-rule-color: #16a085;
    
        column-count: 3;
        column-gap: 60px;
        column-rule-style: outset;
        column-rule-width: 20px;
        column-rule-color: #16a085;
    }

    Screen Shot 2014-10-20 at 2.33.28 pm

  8. column-span – Specifies how many columns an element should span across:
    CSS
    column-span: 1|all|initial|inherit;
    CSS
    div {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
    
    h1 {
        -webkit-column-span: all; /* Chrome, Safari, Opera */
        column-span: all;
    }

    Screen Shot 2014-10-20 at 2.40.44 pm

  9. column-width – Specifies the width of the columns:
    CSS
    column-width: auto|length|initial|inherit;
    CSS
    div {
        -webkit-column-width: 200px; /* Chrome, Safari, Opera */
        -moz-column-width: 200px; /* Firefox */  
        column-width: 200px;
    }

    Screen Shot 2014-10-20 at 2.43.12 pm

  10. columns – A shorthand property for setting column-width and column-count:
    CSS
    columns: auto|column-width column-count|initial|inherit;
    CSS
    div {
        -webkit-columns: 200px 4; /* Chrome, Safari, Opera */
        -moz-columns: 200px 4; /* Firefox */
        columns: 200px 4;
    }

    Screen Shot 2014-10-20 at 3.23.10 pm

OMG!!! We can do so many things with CSS3 Multi Column properties … Really, feels awesome with the smoothness of UI with using mutli column CSS. Hope you will like this post and use the above property in your application (of course if it is required).

Note: Please check here for Browser support details.

Thanks and will be happy to head from you.

Image 11 Image 12

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)