W3docs
en
Log in

CSS column-width Property

The column-width CSS property defines the width of the columns. Find examples here and try them for yourself.

The column-width property defines the width of columns. The browser automatically calculates the number of columns needed to display the content within 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 the container is not wide enough to fit two columns at the specified width. 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. Note that if column-count is also specified, column-width acts as a maximum width, and the browser adjusts the actual column count based on the container's available space.

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

Info

Modern browsers support column-width without vendor prefixes.

Initial Valueauto
Applies toBlock containers except table wrapper boxes.
InheritedNo.
AnimatableYes.
VersionCSS3
DOM Syntaxobject.style.columnWidth = "5px";

Syntax

Syntax of CSS column-width Property

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

Example of the column-width property:

Example of CSS column-width Property with length property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of 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

CSS column-width Property

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of 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

ValueDescriptionPlay it
autoThe width of the column is specified by the browser. This is default value.
lengthThe width of columns is specified by length.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the 'column-width' property in CSS do?