Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The column-width CSS property specifies 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: 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 syntax

<length> | auto

Example

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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

CSS

.content-box {
  column-width: 100px;
}

Result

Specifications

Specification Status Comment
CSS Writing Modes Level 4
The definition of 'column-width' in that specification.
Candidate Recommendation Adds intrinsic sizes via the keywords min-content, max-content, fill-available, and fit-content.
CSS Multi-column Layout Module
The definition of 'column-width' in that specification.
Working Draft Initial definition.

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 50
Full support 50
Full support 1.5
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 10Opera Full support 11.1Safari Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support YesChrome Android Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 50
Full support 50
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
Full support 5.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Intrinsic sizes
Experimental
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
On display: table-captionChrome Full support YesEdge Full support YesFirefox Full support 37IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support 50Edge Mobile Full support YesFirefox Android Full support 37Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

See Also

 

Метки документа и участники

Обновлялась последний раз: rachelandrew,