column-width

When you want to keep your columns at a specific width, use column-width.

section {
-webkit-column-width: 200px;
   -moz-column-width: 200px;
        column-width: 200px;
}

The browser will calculate how many columns of at least that width can fit in the space. Think ofcolumn-width as a minimum width suggestion for the browser.

column-width is a flexible property. Once the browser cannot fit at least 2 columns at your specified width then the columns will stop and drop into a single column.

This property is also used in the shorthand for columns and can be used in tandem with column-count. When both properties are declared column-count is the maximum number of columns.

Values

You can set column-width to auto or a length.

Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead.

To specify the width of the columns, use a length greater than (or equal to) 0. You can use any CSS unit except for percentage.

<ul class="example">
  <li><a href="#" class="tag">ipsum</a></li>
  <li><a href="#" class="tag">dolor</a></li>
  <li><a href="#" class="tag">sit amet</a></li>
  <li><a href="#" class="tag">consectetuer</a></li>
  <li><a href="#" class="tag">adipiscing</a></li>
  <li><a href="#" class="tag">elit</a></li>
  <li><a href="#" class="tag">aliquam</a></li>
  <li><a href="#" class="tag">tincidunt</a></li>
  <li><a href="#" class="tag">mauris</a></li>
  <li><a href="#" class="tag">eu risu</a></li>
  <li><a href="#" class="tag">vestibulum</a></li>
  <li><a href="#" class="tag">auctor</a></li>
  <li><a href="#" class="tag">dapibus neque</a></li>
  <li><a href="#" class="tag">vulputate</a></li>
  <li><a href="#" class="tag">turpis</a></li>
  <li><a href="#" class="tag">duis</a></li>
  <li><a href="#" class="tag">ornare</a></li>
  <li><a href="#" class="tag">lacus</a></li>
  <li><a href="#" class="tag">magna</a></li>
  <li><a href="#" class="tag">vitae</a></li>
  <li><a href="#" class="tag">tincidunt</a></li>
  <li><a href="#" class="tag">leo</a></li>
  <li><a href="#" class="tag">elementum</a></li>
  <li><a href="#" class="tag">sed posuere</a></li>
  <li><a href="#" class="tag">metus</a></li>
  <li><a href="#" class="tag">pellentesque</a></li>
  <li><a href="#" class="tag">mattis</a></li>
</ul>

.example {
  -webkit-column-width: 120px;
  -moz-column-width: 120px;
  column-width: 120px;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

.tag {
  text-decoration: none;
  display: block;
  background: white;
  color: #333;
  padding: 0.3em 0.75em;
  border-radius: 0.2em;
  margin-bottom: 0.5em;
}
.tag:hover {
  background: #34495e;
  color: white;
}

Related Properties

• columns
• column-fill
• column-gap
• column-rule
• column-span
• column-count

Browser Support

Multi-column layout support:

Don’t forget your prefixes!