CSS column-width Property

❮ Prev Next ❯

The column-width property defines the width of columns. The number of columns should be the minimum number that is required for displaying all the content through the element.

The column-width property is one of the CSS3 properties.

It has two values: auto and length. "Auto" is the default value of the column-width property. "Length" specifies the width of columns in px, em and ch. The column-width property is flexible. The columns will drop into one column if at least two columns at the specified width can not be fitted. If the width of the box is narrower than the specified value, the width of the single column will be smaller than the specified column width.

With this property, you can also create responsive designs for different screen sizes.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Some property extensions are added, such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera, etc.

Initial Value	auto
Applies to	Block containers except table wrapper boxes.
Inherited	No.
Animatable	Yes. The border and width are animatable.
Version	CSS3
DOM Syntax	object.style.columnRuleWidth = "5px";

Syntax

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

Example of the column-width property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        -webkit-column-width: 80px;
        /* Chrome, Safari, Opera */
        -moz-column-width: 80px;
        /* Firefox */
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width f the column is set to 80px.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Result

Example of the column-width property with the "auto" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        -webkit-column-width: auto;  /* Chrome, Safari, Opera */
        -moz-column-width: auto; /* Firefox */
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width f the column is set to auto.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>

</html>

Try it Yourself »

Values

Value	Description	Play it
auto	The width of the column is specified by the browser. This is default value.	Play it »
length	The width of columns is specified by length.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.