column-width

  • Revision slug: Web/CSS/column-width
  • Revision title: column-width
  • Revision id: 494111
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Updated tags

Revision Content

{{ CSSRef("CSS Multi-columns") }}

Summary

The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the {{ cssxref("column-count") }} CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are {{ cssxref('width') }}, {{ cssxref('column-width') }}, {{ cssxref('column-gap') }}, and {{ cssxref('column-rule-width') }}.

{{cssbox("column-width")}}

Syntax

Formal syntax: {{csssyntax("column-width")}}
column-width: auto
column-width: 6px     /* Different <length> values */
column-width: 25em
column-width: 0.3vw

column-width: inherit

Values

<length>
Is a {{ Xref_csslength() }} value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
auto
Is a keyword indicating that the width of the column should be determined by other CSS properties, like {{ cssxref("column-count") }}.

Examples

.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Writing Modes', '#multicol-intrinsic', 'column-width') }} {{ Spec2('CSS3 Writing Modes') }} Adds intrinsic sizes via the keywords min-content, max-content, fill-available and fit-content.
{{ SpecName('CSS3 Multicol', '#cw', 'column-width') }} {{ Spec2('CSS3 Multicol') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }} 1.5 (1.8){{ property_prefix('-moz') }} 10 11.1 3.0 (522){{ property_prefix('-webkit') }}
Intrinsic sizes {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Intrinsic sizes {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

  • {{ CSS_Reference:Columns() }}

Revision Source

<p>{{ CSSRef("CSS Multi-columns") }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>column-width</code> CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the {{ cssxref("column-count") }} CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are {{ cssxref('width') }}, {{ cssxref('column-width') }}, {{ cssxref('column-gap') }}, and {{ cssxref('column-rule-width') }}.</p>
<p>{{cssbox("column-width")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("column-width")}}
</pre>
<pre>
column-width: auto
column-width: 6px     /* Different &lt;length&gt; values */
column-width: 25em
column-width: 0.3vw

column-width: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;length&gt;</code></dt>
 <dd>
  Is a {{ Xref_csslength() }} value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.</dd>
 <dt>
  <code>auto</code></dt>
 <dd>
  Is a keyword indicating that the width of the column should be determined by other CSS properties, like {{ cssxref("column-count") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:css; highlight:[3]">
.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Writing Modes', '#multicol-intrinsic', 'column-width') }}</td>
   <td>{{ Spec2('CSS3 Writing Modes') }}</td>
   <td>Adds intrinsic sizes via the keywords <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> and <code>fit-content</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Multicol', '#cw', 'column-width') }}</td>
   <td>{{ Spec2('CSS3 Multicol') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
    <td>1.5 (1.8){{ property_prefix('-moz') }}</td>
    <td>10</td>
    <td>11.1</td>
    <td>3.0 (522){{ property_prefix('-webkit') }}</td>
   </tr>
   <tr>
    <td>Intrinsic sizes</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
   <tr>
    <td>Intrinsic sizes</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
    <td>{{ CompatNo() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ CSS_Reference:Columns() }}</li>
</ul>
Revert to this revision