CSS column-width Property

In CSS, the columns-width property is used to specify the width of the columns. To display the content across the element, the bare minimum of columns is required. It is a versatile property. If the browser cannot fit at least two columns at the specified column width, the two columns will be combined into a single column.

Syntax

column-width: auto | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-width: 150px;
    }
</style>
</head>
<body>

<div class="col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	The default value. The browser will determine the column width.
length	A length that specifies the column width. The number of columns will be the bare minimum required to display all of the content across the element. Learn more about length units.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
column-width	50.0 4.0 -webkit-	52.0 2.0 -moz-	9.0 3.1 -webkit-	10.0	37.0 15.0 -webkit 11.1

column-span

columns

CSS column-width Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us