# Gap decorations (column-rule / row-rule in grid and flex)

Status: Chrome 149 (June 2026). Not Baseline.  
Source: https://developer.chrome.com/release-notes/149  
Page: https://designforai.dev/css/gap-decorations

Draws rules inside grid/flex gaps with `column-rule` and `row-rule` (plus `*-rule-inset` and `-outset`), so divider lines between cards need no borders or pseudo-elements.

## HTML

```html
<ul class="fx-058"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>
```

## CSS

```css
.fx-058 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  font-family: system-ui;
    column-rule: 1px solid #ddd;
  row-rule: 1px solid #ddd;
  column-rule-inset: 4px
}
.fx-058 li {
  padding: 16px;
  text-align: center
}
```

Fallback: Other browsers show the grid without lines; add `border` rules under `@supports not (row-rule: 1px solid red)` if dividers are required.

## Prompt

Draw dividers between grid or flex items with `column-rule` and `row-rule` on the container (Chrome 149+), not with borders on items. If dividers are essential cross-browser, add a `@supports not (row-rule: 1px solid red)` block with per-item borders.