Break Inside

Controls how page, column, or region breaks should behave inside an element. This prevents elements from being split across pages, columns, or regions, which is essential for maintaining the integrity of content blocks like figures, tables, or cards in multi-column layouts and print contexts.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="columns-2">
  <figure class="break-inside-avoid mb-4">
    <div class="bg-gray-200 aspect-video mb-2"></div>
    <figcaption class="text-sm text-gray-600">This figure won't be split across columns</figcaption>
  </figure>
  <p>Regular paragraph text that can flow naturally between columns...</p>
</div>

Examples

Prevents a figure from being split across columns

<div class="columns-2">
  <figure class="break-inside-avoid mb-4">
    <div class="bg-gray-200 aspect-video mb-2"></div>
    <figcaption class="text-sm text-gray-600">This figure won't be split across columns</figcaption>
  </figure>
  <p>Regular paragraph text that can flow naturally between columns...</p>
</div>

Edit in playground

Article with quotes and tables that won't break across columns or pages

<!-- Multi-column article with non-breaking elements -->
<article class="columns-1 md:columns-2 gap-8">
  <h2 class="column-span-all text-2xl font-bold mb-4">Article Title</h2>
  <p class="mb-4">First paragraph of text that can flow between columns...</p>
  <blockquote class="break-inside-avoid bg-gray-100 p-4 border-l-4 border-blue-500 mb-4">
    <p class="italic">This important quote won't break across columns, maintaining its visual integrity.</p>
  </blockquote>
  <p class="mb-4">Another paragraph continuing the article...</p>
  <table class="break-inside-avoid-page w-full mb-4 border-collapse border border-gray-300">
    <tr>
      <th class="border border-gray-300 p-2">Header 1</th>
      <th class="border border-gray-300 p-2">Header 2</th>
    </tr>
    <tr>
      <td class="border border-gray-300 p-2">Data 1</td>
      <td class="border border-gray-300 p-2">Data 2</td>
    </tr>
  </table>
  <p class="mb-4">Final paragraph of the article...</p>
</article>

Edit in playground

Card grid where each card remains intact within a column

<!-- Card grid with non-breaking cards -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
  <div class="break-inside-avoid-column mb-6 bg-white rounded-lg shadow-md overflow-hidden">
    <div class="bg-blue-500 h-48"></div>
    <div class="p-4">
      <h3 class="font-bold text-lg mb-2">Card Title</h3>
      <p class="text-gray-700">This entire card will stay together in one column.</p>
    </div>
  </div>
  <!-- More cards... -->
</div>

Edit in playground

Live Preview

Try the Break Inside utility with different values

Open Interactive Playground

Variants

auto: default browser behavior (allows breaks), avoid: avoid breaks inside element, avoid-page: avoid page breaks inside, avoid-column: avoid column breaks inside, avoid-region: avoid region breaks inside

autoavoidavoid-pageavoid-columnavoid-region