CSS columns Property

CSS columns property specifies minimum width for each column, and/or the maximum number of columns for the HTML element.

columns is a short hand property to specify column-width, and column-count properties in a single shot.

The syntax to specify a value for columns property is

</>
Copy
columns: auto;
columns: column-width column-count;
columns: column-width;
columns: column-count;
columns: initial;
columns: inherit;

where

ValueDescription
autoSets both column-width and column-count values to auto.
column-widthMinimum width for each column. Refer column-width.
column-countMaximum number of columns. Refer column-count.
initialSets column-rule to default value.
inheritInherits column-rule value from its parent element.

Examples

In the following examples, we set the columns property with different values and observe the output.

columns property with width and count

In the following example, we set a minimum width of 150px for each column and a maximum of 4 columns.

index.html

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

columns property with only width

We can set columns property with only the minimum width for each column.

index.html

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

columns property with only count

We can set columns property with only the maximum number of columns.

index.html

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

Conclusion

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