Previous chapter (CSS3 Layout - Rounded corners)Next chapter (CSS3 Layout - Flexible box)

CSS3 Multi Columns Extended

Multi columns property allows us to define column rule and the gap between column and column fill type.

Other examples in Multi columns (CSS3 Layout)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style>
        .div1
        {
            -moz-column-count: 3;
            -webkit-column-count: 3;
            column-count: 3;
            -moz-column-rule: 3px dotted #000099;
            -webkit-column-rule: 3px dotted #000099;
            column-rule: 3px dotted #000099;
            -moz-column-gap: 50px;
            -webkit-column-gap: 50px;
            column-gap: 50px;
            -moz-column-fill: auto;
            -webkit-column-fill: auto;
            column-fill: auto;
        }
    </style>
</head>
<body>
    <div class="div1">
        The colomn-rule property specifies the width, style and color of the rule between
        the coloumns. We can use them separately such as column-rule-widht:3px; column-rule-style:dashed;column-rule-color:red;
        and also together such as column-rule:2px dashed red;.We can define the column gap
        using the column-gap property. Such as column-gap:50px;
    </div>
</body>
</html>

^1.0

^3.0

^13.0

^10.0

^11.1

CSS3 Multi Columns Extended

Useful Information