Layout
break-inside
Control whether a block can split across columns or pages.
Overview
| Class | Declarations |
|---|---|
break-inside:auto | break-inside: auto;
|
break-inside:avoid | break-inside: avoid;
|
break-inside:avoid-column | break-inside: avoid-column;
|
break-inside:avoid-page | break-inside: avoid-page;
|
break-inside:revert | break-inside: revert;
|
break-inside:<value> | break-inside: <value>;
|
Basic usage
Set the break inside behavior
Use break-inside:avoid to keep a card or other block together when content flows across columns or pages. It is an avoidance request: content taller than the available fragment can still need to break.
Both previews use a 200px-tall column container. Compare the blue block with automatic breaks and with avoid.
Set the break inside behavior
Both column sets are 200px tall. The blue block can split in the automatic flow; avoid keeps it together when the condition applies.
<div class="columns:2 h:12.5rem column-fill:auto"> <div class="h:130px">1</div> <div class="h:90px break-inside:avoid">2</div> <div class="h:60px">3</div> <div class="h:40px">4</div></div>Without the avoidance rule, the second block can continue into the next column:
<div class="columns:2 h:12.5rem column-fill:auto"> <div class="h:130px">1</div> <div class="h:90px">2</div> <div class="h:60px">3</div> <div class="h:40px">4</div></div>Apply conditionally
Keep fragmentation automatic at narrow widths and avoid splitting the block at sm. Resize the preview to compare the blue block in the same two-column context. See conditions.
Apply conditionally
Both column sets are 200px tall. The blue block can split in the automatic flow; avoid keeps it together when the condition applies.
<div class="columns:2 h:12.5rem column-fill:auto"> <div class="h:130px">1</div> <div class="h:90px break-inside:auto break-inside:avoid@sm">2</div> <div class="h:60px">3</div> <div class="h:40px">4</div></div>