June 7, 2025

My notes about CSS gap decorations

Purpose:

Enhance CSS with styled lines between layout items in grid, flex, masonry, and multi-column containers (same as column-rule in multicol).

New Properties & Behavior:

row-rule, column-rule to define width, style, and color of decorations.

Complex patterns with repeat().

gap-rule-break to control where decorations start/end.

gap-rule-paint-order to define overlap order between row and column.

gap-rule-outset to adjust start/end positions.