CSS column-width Property

The column-width property sets the minimum width of a column.

The browser then calculates the number of columns to fit the element.

If the value exceeds the element width, a single column is rendered.

Example

#

An element with columns at least 150px wide.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region. His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.
<div style="column-width: 150px">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

Using column-width

Not all browers support column-width.

Syntax

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

Values

#

Value Description
auto Default. Column width is determined by the browser
length The width of the columns. The browser calculates the number of columns that will fit.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see different column-width values.

Paul Gauguin was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region. His work was influential on the French avant-garde and many modern artists, such as Pablo Picasso and Henri Matisse, and he is well known for his relationship with Vincent and Theo van Gogh. Gauguin's art became popular after his death, partially from the efforts of dealer Ambroise Vollard, who organized exhibitions of his work late in his career and assisted in organizing two important posthumous exhibitions in Paris.
<style>
  .column-width-example {
    column-width: auto;
  }
</style>

<div class="column-width-example">
  Paul Gauguin was a French Post-Impressionist
  artist. Unappreciated until after his death,
  Gauguin is now recognized for his experimental
  use of color and Synthetist style that were
  distinct from Impressionism. Toward the end
  of his life, he spent ten years in French
  Polynesia. The paintings from this time
  depict people or landscapes from that region.

  His work was influential on the French
  avant-garde and many modern artists, such
  as Pablo Picasso and Henri Matisse, and he
  is well known for his relationship with
  Vincent and Theo van Gogh. Gauguin's art
  became popular after his death, partially
  from the efforts of dealer Ambroise Vollard,
  who organized exhibitions of his work late in
  his career and assisted in organizing two
  important posthumous exhibitions in Paris.
</div>

Browser support

This table shows when column-width support started for each browser.

Chrome
50.0 Apr 2016
Firefox
Not supported
IE/Edge
10.0 Sep 2012
Opera
37.0 May 2016
Safari
9.0 Sep 2015

You may also like

Guides