CSS column-count Property

CSS column-count property specifies the number of columns a HTML Element has to be divided into.

The syntax to specify a value for column-count property is

</>
Copy
column-count: Value;

The following table gives the possible values that could be given to column-count property.

ValueDescriptionExamples
NumberAn integer representing the number of columns.column-count: 3;
autoDerives the value for column-count from other properties like column-width, etc. [Default Value]column-count: auto;
initialSets column-count to default value.column-count: initial;
inheritInherits column-count value from its parent element.column-count: inherit;

Examples

In the following examples, we set the number of columns for the HTML Element(s), using column-count property, with different possible values.

column-count for Paragraph

In the following example, we set the number of columns for the text in a paragraph, with 3, using column-count property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns.</p>
</body>
</html>

column-count for Div with inner Divs

In the following example, we have an outer div containing multiple inner divs. To display the inner divs in columns, we set the column-count for div with the required number of columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .outer {
            column-count: 3;
        }
        .outer div {
            width: 30%;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
        <div>Item 7</div>
        <div>Item 8</div>
        <div>Item 9</div>
        <div>Item 10</div>
    </div>
</body>
</html>

column-count: auto;

In the following example, we have specified column-width and set column-count with the value auto. The number of columns is automatically derived from column-width.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .outer {
            column-width: 20%;
            column-count: auto;
        }
        .outer div {
            min-width: 20%;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
        <div>Item 7</div>
        <div>Item 8</div>
        <div>Item 9</div>
        <div>Item 10</div>
    </div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-count property, and how to use this property for HTML Elements, with examples.