Skip to main content
CSS is fun and cool and I like it.


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

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 … Read article “break-inside”