column-width
Quick Summary for column-width
The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
Code Usage for column-width
/* Keyword value */ column-width: auto;  /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw;  /* Global values */ column-width: inherit; column-width: initial; column-width: revert; column-width: unset; 
More Details for column-width

column-width

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.

This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are width, column-width, column-gap, and column-rule-width.

Syntax

/* Keyword value */ column-width: auto;  /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw;  /* Global values */ column-width: inherit; column-width: initial; column-width: revert; column-width: unset; 

The column-width property is specified as one of the values listed below.

Values

<length>

Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.

auto

The width of the column is determined by other CSS properties, such as column-count.

Formal definition

Initial valueauto
Applies toBlock containers except table wrapper boxes
Inheritedno
Computed valuethe absolute length, zero or larger
Animation typea length

Formal syntax

<length> | auto

Examples

Setting column width in pixels

HTML
<p class="content-box"> 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 exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> 
CSS
.content-box {   column-width: 100px; } 
Result

Specifications

Specification
CSS Box Sizing Module Level 3 # column-sizing
CSS Multi-column Layout Module Level 2 # cw

See also

Multiple-column Layout (Learn Layout) Basic Concepts of Multicol

Last modified: Feb 19, 2022, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語 Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Not Sure
Random CSS Property

<color>

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.
rgba() css reference