Gaps & gap decorations
Gaps are the fixed spaces between the rows and columns of grid containers, between the items and lines of flex containers, and between the columns of multi-column containers. Rules are lines drawn in those gaps. They are painted in the middle of the gap and take up no space of their own. Column rules started in multi-column layout; the row rules, the rule-* shorthands and the inset, break, visibility and overlap controls are newer and so far ship only in Chrome.
Gaps
gap
Shorthand for row-gap and column-gap: the space between rows and between columns. One value sets both; two set the row gap then the column gap. Gaps only go between tracks, items or columns, never at the outer edges.
| Syntax | <'row-gap'> <'column-gap'>? |
|---|---|
| Initial | See individual properties |
| Applies to | Multi-column containers, flex containers, grid containers and grid lanes containers |
| Inherited | No |
| Percentages | Refer to the corresponding dimension of the content area |
| Animation | By computed value type |
| Support | Chrome 57 · Firefox 52 · Safari 10.1 Flex containers: Chrome 84 · Firefox 63 · Safari 14.1 |
| Spec | css-gaps-1 |
.cards { display: grid; gap: 1rem 2rem; } /* rows, then columns */row-gap, column-gap
The gap between rows (row-gap) or between columns (column-gap). In a flex container, column-gap separates items along a row and row-gap separates the lines of a wrapping container.
| Syntax | normal | <length-percentage [0,∞]> | <line-width> |
|---|---|
| Initial | normal |
| Applies to | Multi-column containers, flex containers, grid containers and grid lanes containers |
| Inherited | No |
| Percentages | Refer to the corresponding dimension of the content area |
| Animation | By computed value type |
| Support | row-gap: Chrome 47 · Firefox 52 · Safari 10.1column-gap: Chrome 1 · Firefox 1.5 · Safari 3Flex containers: Chrome 84 · Firefox 63 · Safari 14.1 |
| Spec | css-gaps-1 |
normal is 1em in multi-column containers and 0 everywhere else.
Column rules
Column rules are drawn in the gaps between columns. In multi-column containers they have long-standing support; in grid and flex containers they are part of the newer gap decorations, which ship with the row rules in Chrome 149.
column-rule
Shorthand for column-rule-width, column-rule-style and column-rule-color, written like a border: 1px solid gray. A <gap-rule> is that width, style and colour in any order; the list forms are comma-separated rules for successive gaps, with repeat() to repeat a run of them.
| Syntax | <gap-rule-list> | <gap-auto-rule-list> |
|---|---|
| Initial | See individual properties |
| Applies to | See individual properties |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 50 · Firefox 52 · Safari 9 |
| Spec | css-gaps-1 |
article { columns: 3; column-gap: 2rem; column-rule: 1px solid currentcolor; }column-rule-width
The thickness of the column rules: a length or thin, medium or thick. A rule wider than its gap overlaps the content on either side rather than widening the gap.
| Syntax | <line-width-list> | <auto-line-width-list> |
|---|---|
| Initial | medium |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | As a repeatable list |
| Support | Chrome 50 · Firefox 52 · Safari 9 |
| Spec | css-gaps-1 |
column-rule-style
The line style of the column rules, using the border-style keywords such as solid, dashed and dotted. The initial none draws nothing, so a rule needs a style to appear.
| Syntax | <line-style-list> | <auto-line-style-list> |
|---|---|
| Initial | none |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | Discrete |
| Support | Chrome 50 · Firefox 52 · Safari 9 |
| Spec | css-gaps-1 |
column-rule-color
The colour of the column rules. A comma-separated list gives successive gaps their own colours.
| Syntax | <line-color-list> | <auto-line-color-list> |
|---|---|
| Initial | currentcolor |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | As a repeatable list |
| Support | Chrome 50 · Firefox 52 · Safari 9 Lists and repeat(): Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
Row rules
The same as the column rules, drawn in the gaps between rows of a grid or between the lines of a wrapping flex container.
row-rule
Shorthand for row-rule-width, row-rule-style and row-rule-color, with the same values as column-rule.
| Syntax | <gap-rule-list> | <gap-auto-rule-list> |
|---|---|
| Initial | See individual properties |
| Applies to | See individual properties |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
row-rule-width
The thickness of the row rules.
| Syntax | <line-width-list> | <auto-line-width-list> |
|---|---|
| Initial | medium |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | As a repeatable list |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
row-rule-style
The line style of the row rules. The initial none draws nothing.
| Syntax | <line-style-list> | <auto-line-style-list> |
|---|---|
| Initial | none |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | Discrete |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
row-rule-color
The colour of the row rules.
| Syntax | <line-color-list> | <auto-line-color-list> |
|---|---|
| Initial | currentcolor |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | As a repeatable list |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
Rule shorthands
rule
Sets column-rule and row-rule to the same value, so one declaration draws lines in every gap.
| Syntax | <'column-rule'> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as column-rule and row-rule |
| Inherited | No |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
.table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; rule: 1px solid silver; }rule-width, rule-style, rule-color
Each sets the matching column-rule-* and row-rule-* property to the same value.
| Syntax | rule-width: <'column-rule-width'>rule-style: <'column-rule-style'>rule-color: <'column-rule-color'> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as the matching column-rule-* and row-rule-* properties |
| Inherited | No |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
Rule insets & behaviour
Where gaps cross, as between the cells of a grid, each rule is split into segments that meet at junctions. A segment end at a junction where other rules are present is a junction end; any other end, such as at the edge of the container, is a cap. Each segment has a start end and an end end, in the direction the gap runs.
column-rule-break, row-rule-break
Whether rules break into separate segments where they meet other gaps. A T intersection is where one gap ends against another, for example at an item spanning two columns; a cross intersection is where two gaps run straight through each other.
| Syntax | none | normal | intersection |
|---|---|
| Initial | normal |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Animation | Discrete |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
| Value | Effect |
|---|---|
none | Rules do not start or end at T or cross intersections. |
intersection | Rules start and end at every T and cross intersection. |
normal | Depends on the container. In grid, rules break at T intersections and continue through cross intersections. Flex containers behave as none. Multi-column containers behave as intersection for column rules and none for row rules. |
rule-break
Sets column-rule-break and row-rule-break to the same value.
| Syntax | <'column-rule-break'> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as column-rule-break and row-rule-break |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
column-rule-visibility-items, row-rule-visibility-items
Which gap segments get a rule, depending on whether the areas either side of the segment hold items. Use it to keep rules away from the empty cells of a partly filled grid.
| Syntax | all | around | between | normal |
|---|---|
| Initial | normal |
| Applies to | Grid containers and multi-column containers |
| Inherited | No |
| Animation | Discrete |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
| Value | Effect |
|---|---|
all | A rule in every segment, whether or not items are next to it. |
around | A rule where at least one of the two neighbouring areas holds an item. |
between | A rule only where both neighbouring areas hold items. |
normal | In grid, behaves as all. In multi-column containers, column rules behave as between and row rules as all. |
rule-visibility-items
Sets column-rule-visibility-items and row-rule-visibility-items to the same value.
| Syntax | <'column-rule-visibility-items'> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as column-rule-visibility-items and row-rule-visibility-items |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
rule-overlap
Which rules are painted on top where row and column rules cross: row-over-column paints row rules above column rules, and column-over-row the reverse.
| Syntax | row-over-column | column-over-row |
|---|---|
| Initial | row-over-column |
| Applies to | Grid containers, flex containers and grid lanes containers |
| Inherited | No |
| Animation | Discrete |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
column-rule-inset, row-rule-inset
Shorthand for all four insets of one direction's rules. The values before the slash set the cap insets; the values after it set the junction insets.
| Syntax | <'column-rule-inset-cap'> [ / <'column-rule-inset-junction'> ]? |
|---|---|
| Initial | See individual properties |
| Applies to | Same as the cap and junction inset properties |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
Shorthands for the start and end insets of one kind of segment end: the -cap ones for ends at the container's edges, the -junction ones for ends where rules meet.
| Syntax | <inset-value> <inset-value>? |
|---|---|
| Initial | See individual properties |
| Applies to | Same as the inset longhands |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
Shorthands that set the cap and junction insets of one end of each segment to the same value.
| Syntax | <inset-value> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as the inset longhands |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
column-rule-inset-cap-start, column-rule-inset-cap-end, column-rule-inset-junction-start, column-rule-inset-junction-end, row-rule-inset-cap-start, row-rule-inset-cap-end, row-rule-inset-junction-start, row-rule-inset-junction-end
Moves one end of each rule segment. A positive value pulls the end inwards and shortens the segment; a negative value pushes it outwards. An <inset-value> is a length, a percentage or the keyword overlap-join, which carries a junction end into the crossing gap so that it meets the crossing rule neatly; at a cap it counts as 0.
| Syntax | <inset-value> |
|---|---|
| Initial | 0 |
| Applies to | Grid containers, flex containers, multi-column containers and grid lanes containers |
| Inherited | No |
| Percentages | Refer to the crossing gap width |
| Animation | By computed value type |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
rule-inset, rule-inset-cap, rule-inset-junction, rule-inset-start, rule-inset-end
Each sets the matching column and row inset properties to the same value.
| Syntax | rule-inset: <'column-rule-inset'>rule-inset-cap: <'column-rule-inset-cap'>rule-inset-junction: <'column-rule-inset-junction'>rule-inset-start: <'column-rule-inset-start'>rule-inset-end: <'column-rule-inset-end'> |
|---|---|
| Initial | See individual properties |
| Applies to | Same as the matching column and row inset properties |
| Inherited | See individual properties |
| Animation | See individual properties |
| Support | Chrome 149 · Firefox no · Safari no |
| Spec | css-gaps-1 |
rule-inset: 0 / 0.25rem;