Last updated on

Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.

column-break-inside

Fortunately, you can tell the browser to keep specific elements together with break-inside.

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

At the moment, the property universally accepts the values auto and avoid.

Use avoid on an element within a multi-column layout to keep the property from breaking apart.

Take one extra look at the syntax for this property as there’s some variation among the browsers.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

The property takes after the page break properties and shares the same values. For now, Firefox uses page-break-inside.

<ul class="example"> 
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
  <li>Mauris eu risus.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
  <li>Consectetuer adipiscing elit.</li> 
  <li>Eu risus.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
  <li>Lorem ipsum dolor sit amet</li> 
  <li>Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
  <li>Vestibulum auctor dapibus neque.</li> 
</ul>
.example {
  -webkit-columns: 150px;
  -moz-columns: 150px;
  columns: 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;  
}

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

li {
  background: white;
  padding: 1em;
  margin-bottom: 1.3em;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

Related Properties

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+