// gap-fill fills the gutters between children with a colour, thickness = gap —
// so gap: 1 is a hairline (what |table| uses) and a larger gap paints a band.
// Per-axis gap picks which rules appear: the grid below gaps rows only (gap: 8 0),
// so only horizontal rules paint; the row flows horizontally with a bold gutter.
{
gap: 34; padding: 26;
}
|row#bands| { gap: 12; gap-fill: --sky-soft; } [
|box#a| "one" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
|box#b| "two" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
|box#c| "three" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
]
|grid#week| { columns: 80 80 80; gap: 8 0; gap-fill: --teal-ink; } [
"Mon" "Tue" "Wed"
"Thu" "Fri" "Sat"
]