Break After

vel-src: layout.css

Utilities for controlling how a column or page should break after an element.

Class	Properties
vel-break-after-auto	break-after: auto
vel-break-after-avoid	break-after: avoid
vel-break-after-all	break-after: all
vel-break-after-column	break-after: column
vel-break-after-page	break-after: page

Examples

Break after variants

vel-break-after-auto

Normal column/page break behavior

vel-break-after-column

Forces column break after element

vel-break-after-avoid

Avoids break after element

vel-break-after-page

Forces page break after element

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-4">
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-after-auto</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Normal column/page break behavior</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-after-column</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Forces column break after element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-after-avoid</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Avoids break after element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-after-page</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Forces page break after element</p>
  </div>
</div>