v149 · CSS · Gap Decorations
Flex Dividers
Six real-world patterns — nav bars, breadcrumbs, tag lists, stats rows, stacked lists, and calendars — all using column-rule or row-rule in flexbox. No extra elements, no ::before hacks.
column-rule in flex and row-rule require Chrome 149+.
All layouts degrade gracefully — the content remains intact, just without the separator lines.
Horizontal navigation — column-rule: 1px solid #000
.nav-bar {
display: flex;
gap: 1.5rem;
column-rule: 1px solid #000;
}
Breadcrumbs — column-rule: 1px solid #ccc
.breadcrumbs {
display: flex;
gap: 1rem;
column-rule: 1px solid #ccc;
align-items: center;
}
Tag list — column-rule-style: dashed
.tag-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
column-rule-style: dashed;
column-rule-width: 1px;
column-rule-color: #000;
}
Stats row — column-rule: 2px solid #000
.stats-row {
display: flex;
gap: 2rem;
column-rule: 2px solid #000;
}
Vertical list — row-rule: 1px dashed #000
Gap decorations extend column-rule to work in flex and grid layouts.
The new row-rule property styles gaps in the block direction — between rows in flex-column or grid rows.
Rules are purely decorative — they don't affect the box model or participate in layout.
.stack {
display: flex;
flex-direction: column;
gap: 1rem;
row-rule: 1px dashed #000;
}
Calendar rows — alternating row-rule (repeat syntax)
.time-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
/* hour lines: thick solid; half-hour: thin dashed */
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #000, #ccc;
}
see also
scenario focus
Select a scenario to focus its rendered example and summary.
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗