📏

CSS Gap Decorations

Draw lines in gaps with row-rule/column-rule

When you want visual dividers in the gap area between grid or flexbox items, you previously had to use borders or pseudo-elements as workarounds. The Gap Decorations specification solves this natively through row-rule and column-rule properties.

Available by enabling an experimental flag in Chrome 139+, it allows clean divider layouts without table markup.

column-rule: Vertical dividers in Grid

The column-rule property, previously only for multi-column, can now be used in Flexbox and Grid.

.my-grid-container {
  display: grid;
  gap: 2px;
  column-rule: 2px solid pink;
}

row-rule + column-rule: Combined

.my-flex-container {
  display: flex;
  gap: 10px;
  row-rule: 10px dotted limegreen;
  column-rule: 5px dashed coral;
}

repeat() for style patterns

.my-container {
  display: grid;
  gap: 2px;
  row-rule:
    repeat(2, 1px dashed red),
    2px solid black,
    repeat(auto, 1px dotted green);
}

Browser Support (2026)

Requires flag in Chrome/Edge 139+: about://flags → Experimental Web Platform Features. Standardization in progress for Grid, Flexbox, Multi-column, and Masonry.