CSS Gap Decorations playground

This interactive demo showcases the features of the CSS Gaps Decorations Module Level 1. Use the controls to tweak gap, rule, and paint-order properties in real time and see how they affect multicolumn, flex, and grid layouts.

This is a non-exhaustive demo. See the spec for full details on the properties and their values.

As of right now, this is only implemented for Chromium-based browsers, and a flag is needed to enable the feature: --enable-features=CSSGapDecoration

Grid Layout

Spanning Item
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Double-Row Spanner
Grid Item 6
Grid Item 7
Grid Item 8
Grid Item 9

Flex Layout

Wide Flex Item
Flex Item A
Medium Flex Item
Flex Item B
Flex Item C
Flex Item D

Multicolumn Layout

Exploring Gap Decorations

Gap decorations provide a flexible way to visually separate content without extra markup. Columns adapt dynamically to viewport size, maintaining readability.

Use column-rule properties to style separators, control their outset, and define how they interact with multi-column spans.

“Effective gap decorations enhance layout clarity while preserving semantic structure.”
  • Adjust column-gap for spacing.
  • Tweak column-rule-width and column-rule-outset.
  • Control break behavior with row-rule-break and column-rule-break.

Combine with gap-rule-paint-order to layer rules in complex layouts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec est at dolor scelerisque elementum.

Mauris posuere, libero non suscipit consectetur, odio tortor vulputate mi, vitae consequat justo arcu non ex.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer a pulvinar erat.

Fusce vehicula eros a lectus tincidunt, sit amet venenatis lorem ultrices.