CSS column-width Property

CSS column-width property specifies the width of each column when an HTML Element is displayed as columns.

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

</>
Copy
column-width: Value;

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

ValueDescriptionExamples
autoThe column width is automatically determined by the browser using information like column-count.
[Default Value]		column-width: auto;
LengthA specific length in CSS Length Units.column-width: 150px;
initialSets column-width to default value.column-width: initial;
inheritInherits column-width value from its parent element.column-width: inherit;

Examples

In the following examples, we set the width of each column with different possible values, using column-width property.

column-width set with a Length

In the following example, we set the width of each column to 150px.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-width: 150px;
        }
    </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>

column-width set to auto

In the following example, we set the width of each column to auto. Also, we set column-count property with 2. Based on this information, browser calculates the width of each column.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 2;
            column-width: auto;
        }
    </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 column-width property, and how to use this property for HTML Elements, with examples.