@gap
The gap between cells, and optionally a rule drawn inside it.
Syntax
- @gap: <gap>
- @gap: <row-gap> <column-gap>
- @gap: <gap> <rule>
- gap
- One or two lengths, as the CSS
gapproperty. A bare number is pixels. - rule
-
Anything after the lengths describes a line drawn in the gap, in border shorthand style:
width, style and color in any order. A missing style is
solid. A rule with no width fills the gap, and when no gap is given the gap takes the width of the rule.
The value is applied to :container. The _ modifier of
@grid takes the same writing.
Only the first @gap counts.
Rules are emitted as row-rule and column-rule, which need a recent browser.
Examples
@grid: 5 / 60vmin;
@gap: 10px 20px;
background: #000;
/* equals */
:container {
gap: 10px 20px;
}A dashed rule inside a 6px gap:
@grid: 5 / 60vmin;
@gap: 6px dashed #000;
background: #fff;
box-shadow: inset 0 0 0 1px #000;A rule with no width of its own fills the gap:
@grid: 8 / 60vmin;
@gap: 4px #e6437d;
background: #000;