CSS break-inside Property

What You’ll Learn

The break-inside property controls breaks within an element — keeping cards, figures, and list items intact across columns and printed pages instead of splitting them in the middle.

Definition and Usage

The break-inside CSS property controls the behavior of breaks within elements when printing or when dealing with multi-column layouts. It helps prevent unwanted breaks inside elements, ensuring that content maintains its intended structure and appearance across different devices and print formats.

While break-before and break-after control breaks at the edges of an element, break-inside focuses on whether the element itself can be split across columns or pages.

📝 Syntax

Apply break-inside to any element to control how breaks inside it are handled:

selector {
  break-inside: auto | avoid | avoid-page | avoid-column | avoid-region;
}

Basic Example

.item {
  break-inside: avoid;
}

Syntax Rules

• The initial value is auto.
• avoid is the most common value — it tries to keep the element unsplit.
• avoid-column targets column fragmentation specifically.
• avoid-page targets page fragmentation in print.
• The property can be inherited when using the inherit keyword.

💎 Property Values

The break-inside property accepts keyword values that control fragmentation within an element.

break-before, break-after, and break-inside

CSS provides three related break properties. Together they give full control over fragmentation:

• break-before — Controls a break before the element starts.
• break-after — Controls a break after the element ends.
• break-inside — Controls whether the element itself can be split across columns or pages.

For a card grid in columns, break-inside: avoid on each card is usually the most important rule — it keeps each card readable as one unit.

Examples Gallery

Try multi-column cards, print figures, tables, and a combined print stylesheet.

<style>
  .container {
    column-count: 3;
    column-gap: 20px;
  }

  .item {
    break-inside: avoid;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  @media print {
    figure {
      break-inside: avoid;
    }
  }
</style>

<figure>
  <img src="chart.png" alt="Chart">
  <figcaption>Figure 1: Quarterly results</figcaption>
</figure>

<style>
  @media print {
    table {
      break-inside: avoid-page;
    }
  }
</style>

<table>
  <tr><th>Team</th><th>Score</th></tr>
  <tr><td>Team A</td><td>92</td></tr>
</table>

@media print {
  .card {
    break-inside: avoid;
  }

  figure,
  table {
    break-inside: avoid-page;
  }

  h2 {
    break-before: page;
  }
}

💡 Best Practices