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.
An element with columns at least 150px wide.
<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>
Not all browers support column-width.
column-width: auto | length |
initial | inherit;
| 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. |
Click the buttons to see different column-width values.
<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>
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 |
