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

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

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