Layout
break-before
Control column and page breaks before an element.
Overview
| Class | Declarations |
|---|---|
break-before:auto | break-before: auto;
|
break-before:avoid | break-before: avoid;
|
break-before:avoid-column | break-before: avoid-column;
|
break-before:avoid-page | break-before: avoid-page;
|
break-before:column | break-before: column;
|
break-before:left | break-before: left;
|
break-before:page | break-before: page;
|
break-before:recto | break-before: recto;
|
break-before:revert | break-before: revert;
|
break-before:right | break-before: right;
|
break-before:verso | break-before: verso;
|
break-before:<value> | break-before: <value>;
|
Basic usage
Set the break before behavior
Use break-before:column to force a column break before the marked element. The break needs a fragmentation context, such as a multi-column container; it does not create a new column in ordinary block flow.
Set the break before behavior
Both column sets are 200px tall. The forced break moves content to the next column before the blue block when the condition applies.
<div class="columns:2 h:12.5rem column-fill:auto"> <div class="h:48px">01</div> <div class="h:48px break-before:column">02 · Target</div> <div class="h:48px">03</div> <div class="h:48px">04</div></div>Apply conditionally
Leave the break automatic at narrow widths, then force a column break before the element at sm. Both column containers are 200px tall and fill from top to bottom. Resize the preview to compare the result. See conditions.
Apply conditionally
Both column sets are 200px tall. The forced break moves content to the next column before the blue block when the condition applies.
<div class="columns:2 h:12.5rem column-fill:auto"> <div class="h:48px">01</div> <div class="h:48px break-before:auto break-before:column@sm">02 · Target</div> <div class="h:48px">03</div> <div class="h:48px">04</div></div>