Skip to content

Spanning

A region isn't limited to a single rectangle. You can join rectangles along shared edges to produce L-shapes, T-shapes, or more complex "blobs" — Gridgram renders the union as one outline, so the result looks like a single shape rather than overlapping boxes.

Single-cell or single-range

gg
region @C2 "one cell"
region @A1:D1 "Top row"
  • @c,r on its own is a 1×1 region — a single highlighted cell.
  • @c,r-c,r is a range (both ends inclusive), so @A1-D1 covers cells 0, 1, 2, 3.

Multi-entry (L / T / compound)

region-spanning (SVG, frame 1)
ABCD
123
gg
region @A2:A3 @A3:D3 "L-shape" color=primary/14

Multiple @ entries (space-separated) are unioned into a single shape. The example above combines a vertical strip (col 0, rows 1–2) with a horizontal strip (row 2, cols 0–3), producing an L.

Connectivity rule

Multiple entries must touch along an edge (share at least one cell side). Two disjoint rectangles are rejected:

gg
region @A1 @D4      # ✗ disjoint — the parser errors out

The reason is mostly visual: rendering an isolated-island region as "one region" would confuse the reader. If you genuinely want two islands, write them as two separate region statements.

Why one outline, not stacked rectangles

When you multi-enter, Gridgram builds an occupancy matrix, traces the boundary once, and draws a single path. No visible seams where the rectangles meet; the corner-radius applies uniformly around the union.

Patterns

Full row / column strip:

gg
region @A1:D1 "Public"
region @D1:D3 "DMZ"

L-shape (sidebar + footer, for example):

gg
region @A1:A3 @A3:D3 "Platform"

Complex blob (rare but supported):

gg
region @A1:B1 @B1:B3 @B3:D3 "Pipeline"

When the shape becomes non-obvious in DSL, moving the region into a doc { regions: … } body is usually clearer — regions[].spans is the same list of { from, to } pairs.

Edit this pageLast updated: