Limited supportUseful when Column breaks helps structure space, flow, or sizing without relying on brittle manual adjustments.
Layout Limited support

Column breaks

In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.

Layout

Overview

In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.break-after.avoid-column
50
79
10
50
10
CSS property
column
50
79
10
50
10
multicol context

Supported in Multi-column Layout
50
12
65
50
multicol context.avoid
102
102
102
multicol context.avoid-column
102
102
102
multicol context.column
50
12
50
avoid-column
50
79
10
50
10
column
50
79
10
50
10
multicol context

Supported in Multi-column Layout
50
12
65
50
multicol context.avoid
102
102
102
multicol context.avoid-column
102
102
102
multicol context.column
51
12
51
avoid-column
50
79
92
10
50
10
multicol context

Supported in Multi-column Layout
50
12
65
10
50
10
multicol context.avoid-column
50
12
92
10
50
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only supported in print mode. See bug 1675322.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only supported in print mode. See bug 1675322.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)

Syntax

CSS 
.card {
  break-inside: avoid;
}
h2 {
  break-before: column;
  break-after: avoid;
}

Live demo

break-inside: avoid

CSS Break-inside: avoid demo.

PreviewFullscreen

break-before: column

CSS Break-before: column demo.

PreviewFullscreen

break-after: avoid

CSS Break-after: avoid demo.

PreviewFullscreen

Use cases

  • Component layout

    Use Column breaks to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links

Powered by web-features