break-inside

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 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.

See the Pen column break-inside example [CSS-Tricks] by Katy DeCorah (@katydecorah) on CodePen.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

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

Comments

  1. User Avatar
    jochem
    Permalink to comment#

    Dear Chris,

    i’ve discovered that using -webkit-column-break-inside: avoid behaves inconsistent when the number of elements inside the container varies. I’ve adjusted your pen to illustrate it.

  2. User Avatar
    Sokio
    Permalink to comment#

    The link to page break is broken in the following phrase…

    “The property takes after the page break properties and shares the same values.”

  3. User Avatar
    Al Hipkins
    Permalink to comment#

    First line of my second column is indented/centered/mis-aligned but only in Firefox. Please look at http://www.ams-net.org/~testing/columns.php

  4. User Avatar
    le hollandais volant
    Permalink to comment#

    This works when the container (on which we apply the column layout) contains more than one element.

    If there is only one element, Firefox will break it to make it fit on all the columns (which also has another Firefox bug: links and hover in the first cut blocks do not work). To avoid this behaviour, I apply display: inline-block on the block only if it is the only one of the list, with this:

    .element:first-of-type:last-of-type {
        display: inline-block;
    }
    

    This might produce other glitches but it is sufficient for my usage (at least as long as Firefox keeps breaking the single element).
    I suspect that Firefox has this behaviour each time there are X elements in a container where I apply N columns, and where X<N).

  5. User Avatar
    Jose
    Permalink to comment#

    Thanks for the article! It’s perfect… almost. In the codepen example, I see that the columns are all not flush with the top edge of their container. As I resize the window, one or two sometimes has padding at the top, and sometimes it doesn’t.

    Any idea on how to address this inconsistency? I’ve been researching my buns off here, but am turning up no solutions. :(

    Thanks!

    • User Avatar
      John Skowronski
      Permalink to comment#

      I think I have found the missing piece of the puzzle: When I got rid of the margin-bottom on the , the top edge alignment problem went away.

  6. User Avatar
    Kade
    Permalink to comment#

    Very helpful, thank you!

  7. User Avatar
    Sagar
    Permalink to comment#
    <script>
      function example() {
        element.innerHTML = "<div>code</div>";
      }
    </script>
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag