CSS

CSS

🎯 CSS break-before Property

The break-before CSS property controls whether a page, column, or line break should occur before an element, especially in multi-column layouts.

It defines whether an element starts in a new column or continues in the current flow of content.

πŸ”Ή Where Is break-before Used?

  • Common Use Cases

  • πŸ“Œ Newspaper and magazine-style layouts
  • πŸ“Œ Multi-column blog articles
  • πŸ“Œ Card-based grid systems
  • πŸ“Œ Structured long-form content

πŸ”Ή break-before Values

  • auto β†’ Browser decides where to break
  • column β†’ Forces a new column before the element
  • initial β†’ Resets to default (auto)

🧩 Basic Example

CSS

.columns {
    column-count: 3;
}

h2 {
    break-before: column;
}

In this example, the content is split into 3 columns, and every H2 heading starts in a new column.

  • 🧠 Summary

  • break-before controls whether an element starts on a new column or page.
  • It is mainly used in multi-column layouts and print-style designs.
  • column forces a new column break before the element.
  • auto lets the browser decide automatically.
CSS column-rule
CSS break-after