🌐 What Is break-before?

The break-before property controls whether apage break, column break, or region break should occurimmediately before an element. It is part of the CSS Fragmentation Module and is used in:

📦 Syntax

break-before:
  auto | avoid | always | page | column | left | right | recto | verso;

📌 1. Force a Column Break Before a Heading

h2 {
  break-before: column;
}

Ensures each <h2> starts at the top of a new column — great for multi-column articles or magazines.

📌 2. Force a Page Break Before a Chapter (Print)

@media print {
  .chapter-title {
    break-before: page;
  }
}

Ensures every chapter begins on a fresh printed page.

📌 3. Start New Page Only on Right (Recto) Pages

@media print {
  h1 {
    break-before: right; /* or recto */
  }
}

Used in book publishing to ensure titles always appear on right-hand pages.

📌 4. Avoid Breaks Before Elements

.no-break-before {
  break-before: avoid;
}

Prevents undesirable breaks before elements like subtitles or images.

📌 5. Use in Multi-Column Layouts (Web + Print)

article {
  column-count: 3;
  column-gap: 40px;
}

h2 {
  break-before: column;
}

p, img {
  break-inside: avoid;
}

Ensures major sections begin at the top of a column and content stays intact.

📌 6. Flow Content Across Pages in Reports

@media print {
  table {
    break-before: page;
  }
}

Large elements like tables often benefit from starting on a new page.

🧪 Real-World Examples

1️⃣ PDF / Book Chapter Formatting

@media print {
  .chapter {
    break-before: page;
  }
}

2️⃣ Multi-Column Resume Layout

.section-title {
  break-before: column;
}

3️⃣ Avoid Breaking Before Cards in a Masonry Grid

.card {
  break-before: avoid;
  break-inside: avoid;
}

⚠️ Common Mistakes

🔥 Summary

The break-before property gives fine control over where new pages or columns begin. It is invaluable for professional printing, ebook formatting, multi-column layouts, and long-form content.

Learn more →MDN Docs 📘

🌐 What Is break-inside?

The break-inside property controls whether content is allowed to break inside an element when the layout is fragmented. Fragmentation occurs in:

📦 Syntax

break-inside: auto | avoid | avoid-page | avoid-column;

📌 1. Prevent Breaking Inside Cards (Masonry Layout)

.card {
  break-inside: avoid;
}

Ensures cards do not split across columns — essential in masonry-style layouts.

📌 2. Prevent Breaking Inside Images

img {
  break-inside: avoid;
}

Prevents images from splitting across printed pages or columns.

📌 3. Prevent Headings From Breaking

h2, h3 {
  break-inside: avoid;
}

Ensures headings stay grouped with their content.

📌 4. Prevent Splits Inside Tables (Print)

@media print {
  table {
    break-inside: avoid-page;
  }
}

Essential when printing financial reports or documents with tabular data.

📌 5. Avoid Column Breaks Inside Quotes or Special Sections

blockquote {
  break-inside: avoid-column;
}

Helps maintain readability and flow across columns.

📌 6. Use With Multi-Column Layout

article {
  column-count: 3;
}

p, img, h2 {
  break-inside: avoid;
}

Prevents awkward splits while reading multi-column text.

🧪 Real-World Examples

1️⃣ Pinterest-Style Masonry Layout

.grid {
  column-count: 4;
  column-gap: 1.5rem;
}

.card {
  margin-bottom: 1.5rem;
  break-inside: avoid;
}

The browser arranges cards beautifully without splitting them.

2️⃣ Newsletter or Magazine Columns

.newsletter {
  column-count: 2;
}

blockquote,
figure {
  break-inside: avoid-column;
}

Prevents quotes or images from getting split across columns.

3️⃣ Printing Reports Without Page Breaks in Sections

@media print {
  .report-section {
    break-inside: avoid-page;
  }
}

Keeps each report section intact across printed pages.

⚠️ Common Mistakes

🔥 Summary

The break-inside property prevents unwanted splits inside content blocks when working with multi-column layouts orprinted/paged documents. Use it for images, cards, tables, quotes, and sections to maintain readability.

Learn more → MDN Docs 📘