Hello all,

Here I am sharing some information about how to get multiple columns layout using css3.

By using css3 column-count property we can divide an element into number of columns. Here is an example:

div {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

This will divide the text in the div into 4 columns.

We can also add the following properties:

column-gap : It is used to give the space to the rules between columns. We can give column-gap in pixels.

column-rule-style : It is used to give any style to the rules between columns like giving it colour or any other style property.

column-rule-width : It is used to give the width to the rules between columns.

column-rule-color : We can give colour to the rule by using this property.

column-rule : It is a shorthand property which is used for setting all the above column-rules-* properties.

Example:

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

div {
    -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 2px; /* Firefox */
    column-rule-width: 2px;
}

div {
    -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: blue; /* Firefox */
    column-rule-color: blue;
}

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

Hope this will help you to understand the multiple-column-layouts. :)