---
title: CSS Multi-column Layout
slug: Web/CSS/CSS_Columns
tags:
  - CSS
  - CSS Multi-column Layout
  - Layout
  - NeedsTranslation
  - Overview
  - Reference
  - TopicStub
translation_of: Web/CSS/CSS_Columns
---
<div>{{CSSRef("CSS3 Multicol")}}</div>

<p>The <strong>CSS Multi-column Layout</strong> standard is a CSS module that adds support for multi-column layouts to CSS. This module makes it easier and more reliable than ever to produce columnar layouts without having to hand-code complicated and fragile structures. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes, column dividing lines (known as column rules), and so forth.</p>

<h2 id="Multi-column_layout_basics">Multi-column layout basics</h2>

<p>The three key properties used to produce the layout of columns in CSS are {{cssxref("column-count")}}, {{cssxref("column-width")}}, and {{cssxref("column-gap")}}. Other properties provide ways to fine-tune details of how things are organized and rendered within the layout structure built using those properties, but the job of figuring out what goes where is generally handled by these four.</p>

<h3 id="Suggesting_the_number_of_columns_and_their_widths">Suggesting the number of columns and their widths</h3>

<p>The first two properties, <code>column-count</code> and <code>column-width</code>, are both the most important and the most potentially misleading. It's important to understand that:</p>

<ul>
 <li>The {{cssxref("column-count")}} property specifies a <em>maximum</em> number of columns to use to render the text. The browser will consider the amount of horizontal space available, the value of <code>column-width</code>, and the value of <code>column-gap</code>, then draw the largest number of columns across that it can fit into the available space.</li>
 <li>The {{cssxref("column-width")}} property specifies a <em>minimum</em> column width, given a {{cssxref("length")}} value. Each column the browser creates will be at least this wide, but may be wider. After determining the number of columns that it will draw, any remaining horizontal space may be divided up by the browser among the columns  and added to their widths.</li>
</ul>

<p>In a way, then, they're more like recommendations than hard and fast rules. And this makes sense once you consider the logic of it; this allows multi-column layouts to be responsive and adaptive to the screen width, while also supporting the overall layout of the page and the intent of the author. As the width of the containing space (or the screen) shrinks, the browser will reduce the number of columns it creates, adjusting the remaining columns' widths to ensure that the overall width is as expected.</p>

<p>The other thing you can control is the distance between the columns, known as the column gap. The column gap can be controlled using the {{cssxref("column-gap")}} property. By convention, the default gap is <code>1em</code>, but this may or may not be the case in any given browser, so if it matters to you, explicitly set it. The column  gap, unlike the column count and width, doesn't get adjusted by the browser as it tries to fit the content into the available space.</p>

<p>Take a look at the example below, in which you can use the range control at the top to adjust the width of the columns' containing element.</p>

<div class="hidden">
<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;
  Use the slider to change the container width:
&lt;/p&gt;
&lt;div class="controls"&gt;
  &lt;input type="range" id="widthSlider" min="350" max="625"&gt;
  &lt;span id="widthDisplay"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class="columnbox"&gt;
&lt;p&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent dignissim feugiat tellus, vitae vehicula nunc
  fermentum at. Nulla ut leo tincidunt turpis tincidunt
  facilisis vel sit amet nisl. Duis odio mauris, ornare vitae
  est eget, molestie aliquet quam. Quisque sed lacus sodales
  nulla dignissim semper. Mauris finibus erat ut molestie
  sagittis. Maecenas eget augue dapibus eros mollis
  consectetur quis a mauris. Ut quis ipsum egestas, molestie
  augue id, lobortis neque. Sed malesuada id justo nec
  accumsan. Curabitur non tempus ligula, ut congue libero.
  Morbi mattis, neque at feugiat rutrum, ipsum massa iaculis
  risus, ut rutrum justo purus et urna. Aenean semper ornare
  enim, maximus tincidunt ante tincidunt sed. Fusce imperdiet
  id tellus molestie laoreet.
&lt;/p&gt;
&lt;p&gt;
  Sed non fringilla turpis, ac fermentum neque. Nunc tortor
  sapien, convallis in odio dictum, maximus hendrerit metus.
  Phasellus vitae molestie lacus, sed imperdiet enim. Praesent
  tempus ligula eget orci interdum, et tempus nunc rutrum.
  Cras vel arcu non ipsum sodales faucibus vestibulum eu mi.
  Fusce sed laoreet turpis, eu rutrum leo. Vestibulum sit amet
  porta mauris. Curabitur in nisi a neque ultricies iaculis
  sit amet vel felis. Suspendisse lobortis iaculis gravida. Ut
  bibendum vestibulum lacus eget dignissim.
&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">let widthSlider = document.getElementById("widthSlider");
let widthDisplay = document.getElementById("widthDisplay");
let columnBox = document.querySelector(".columnbox");

widthSlider.value = columnBox.offsetWidth;
widthDisplay.innerText = widthSlider.value;

widthSlider.addEventListener("input", function(event) {
   columnBox.style.width = widthSlider.value.toString() + "px";
   widthDisplay.innerText = widthSlider.value;
}, false);</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">body {
  font: 16px "Open Sans", "Arial", "sans-serif";
}

.columnbox {
  width: 400px;
  column-count: 3;
  column-width: 12em;
  border: 1px dotted black;
}

.columnbox p:first-child {
  margin-top: 0;
}

.controls {
  font: 16px "Open Sans", "Arial", sans-serif;
}</pre>

<h4 id="Result">Result</h4>
</div>

<p>{{EmbedLiveSample("Suggesting_the_number_of_columns_and_their_widths", 650, 800)}}</p>

<h3 id="Text_wrapping_in_multi-column_layouts">Text wrapping in multi-column layouts</h3>

<p>The {{cssxref("column-fill")}} property also affects layout. By default, the browser will create as many appropriately-sized columns as it can, then balance the contents across them so that each column is approximately the same length. If, however, you prefer to have the browser fill the first column to its maximum height before moving on to the next column, you can set <code>column-fill</code> to <code>auto</code> (instead of the default, <code>balance</code>).</p>

<p>If there is no constraint on the column height, however, there will only be one column created, as it will never reach its maximum height to trigger wrapping to the second column, so be sure to either place your columns inside a container which constrains their height, either by using {{cssxref("height")}} or {{cssxref("max-height")}}.</p>

<div class="note">
<p>While the CSS specification defines the {{cssxref("break-before")}}, {{cssxref("break-after")}}, and {{cssxref("break-inside")}} properties to help control wrapping of elements across region, column, or page boundaries, these properties are generally not implemented widely enough to use in real-world code at this time.</p>
</div>

<h3 id="Column_appearance">Column appearance</h3>

<p>You can specify that a column rule—a dividing line drawn in the center of each column gap—be drawn between each column in the rendered output of your layout by using the {{cssxref("column-rule-style")}}, {{cssxref("column-rule-width")}}, and {{cssxref("column-rule-color")}} properties, or the shorthand property {{cssxref("column-rule")}}.</p>

<h2 id="Reference">Reference</h2>

<h3 id="CSS_properties">CSS properties</h3>

<div class="index">
<ul>
 <li>{{cssxref("break-after")}}</li>
 <li>{{cssxref("break-before")}}</li>
 <li>{{cssxref("break-inside")}}</li>
 <li>{{cssxref("column-count")}}</li>
 <li>{{cssxref("column-fill")}}</li>
 <li>{{cssxref("column-gap")}}</li>
 <li>{{cssxref("column-rule")}}</li>
 <li>{{cssxref("column-rule-color")}}</li>
 <li>{{cssxref("column-rule-style")}}</li>
 <li>{{cssxref("column-rule-width")}}</li>
 <li>{{cssxref("column-span")}}</li>
 <li>{{cssxref("column-width")}}</li>
 <li>{{cssxref("columns")}}</li>
</ul>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using CSS multi-column layouts</a></dt>
 <dd>Step-by-step tutorial about how to build layouts using several columns.</dd>
</dl>

<h2 id="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 Multicol')}}</td>
   <td>{{Spec2('CSS3 Multicol')}}</td>
   <td>Initial definition</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>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}<br>
    {{CompatGeckoDesktop(52)}}</td>
   <td>10</td>
   <td>11.10<br>
    15{{property_prefix('-webkit')}}</td>
   <td>3.0 (522){{property_prefix('-webkit')}}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1{{property_prefix('-webkit')}}</td>
   <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}<br>
    {{CompatGeckoMobile(52)}}</td>
   <td>10</td>
   <td>11.5<br>
    32{{property_prefix('-webkit')}}</td>
   <td>3.2{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<p>Other CSS layout technologies include:</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible box layout</a> (CSS flexbox)</li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid layout</a></li>
</ul>