Layout
break-after
Control column and page breaks after an element.
Overview
| Class | Declarations |
|---|---|
break-after:auto | break-after: auto;
|
break-after:avoid | break-after: avoid;
|
break-after:avoid-column | break-after: avoid-column;
|
break-after:avoid-page | break-after: avoid-page;
|
break-after:column | break-after: column;
|
break-after:left | break-after: left;
|
break-after:page | break-after: page;
|
break-after:recto | break-after: recto;
|
break-after:revert | break-after: revert;
|
break-after:right | break-after: right;
|
break-after:verso | break-after: verso;
|
break-after:<value> | break-after: <value>;
|
Basic usage
Set the break after behavior
Use break-after:column to force a column break after 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 after behavior
Both column sets are 200px tall. The forced break moves content to the next column after 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-after: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 after 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 after 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-after:auto break-after:column@sm">02 · Target</div> <div class="h:48px">03</div> <div class="h:48px">04</div></div>