Click here to Skip to main content
15,867,288 members
Articles / Web Development / CSS3

CSS3: Multiple Column Layout

Rate me:
Please Sign up or sign in to vote.
4.98/5 (20 votes)
31 Aug 2016CPOL1 min read 19K   14   17
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)


Written By
Software Developer (Senior)
India India
Software engineer with around 6 years of web application development experience in open source technologies like PHP, MySQL, HTML, HTML5, CSS, CSS3, Javascript, jQuery etc.

I love to learn and share my knowledge in which manner I can and like to solve the issues as in the coding perspective. I am an active contributor in community forums like StackOverflow, CodeProject etc. Besides that, I write blogs in free time and speak in various technical community events.

Comments and Discussions

 
QuestionResponsive? Pin
Jaime Premy6-Sep-16 12:23
professionalJaime Premy6-Sep-16 12:23 
AnswerRe: Responsive? Pin
Prava-MFS6-Sep-16 21:04
professionalPrava-MFS6-Sep-16 21:04 
GeneralMy vote of 5 Pin
Vaso Elias6-Sep-16 5:17
Vaso Elias6-Sep-16 5:17 
GeneralMy vote of 5 Pin
Member 123643904-Sep-16 21:16
Member 123643904-Sep-16 21:16 
GeneralRe: My vote of 5 Pin
Prava-MFS4-Sep-16 21:41
professionalPrava-MFS4-Sep-16 21:41 
GeneralMy vote of 1 Pin
Gedarius2-Sep-16 7:23
Gedarius2-Sep-16 7:23 
GeneralRe: My vote of 1 Pin
Prava-MFS4-Sep-16 21:42
professionalPrava-MFS4-Sep-16 21:42 
GeneralRe: My vote of 1 Pin
JustJimBean14-Sep-16 4:58
JustJimBean14-Sep-16 4:58 
GeneralRe: My vote of 1 Pin
Prava-MFS14-Sep-16 8:43
professionalPrava-MFS14-Sep-16 8:43 
GeneralMy vote of 5 Pin
William Ivanski2-Sep-16 6:58
professionalWilliam Ivanski2-Sep-16 6:58 
GeneralRe: My vote of 5 Pin
Prava-MFS4-Sep-16 21:42
professionalPrava-MFS4-Sep-16 21:42 
Thank you so much for the wishes and glad to know that it helped you to learn a new thing. Smile | :)

QuestionVote of 5! Pin
Neil Diffenbaugh24-Oct-14 9:20
Neil Diffenbaugh24-Oct-14 9:20 
AnswerRe: Vote of 5! Pin
Prava-MFS25-Oct-14 2:43
professionalPrava-MFS25-Oct-14 2:43 
GeneralMy vote of 1 Pin
Member 1090330722-Oct-14 8:52
Member 1090330722-Oct-14 8:52 
GeneralRe: My vote of 1 Pin
Prava-MFS22-Oct-14 22:32
professionalPrava-MFS22-Oct-14 22:32 
GeneralMy vote of 1 Pin
Gerd Wagner22-Oct-14 5:54
professionalGerd Wagner22-Oct-14 5:54 
GeneralRe: My vote of 1 Pin
Prava-MFS22-Oct-14 8:13
professionalPrava-MFS22-Oct-14 8:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.