Gestalt: common region

What is the Gestalt law of common region?

Common region is the grouping effect that occurs when items share a boundary: surround some elements with a line or tinted background, and they’ll be perceived as a group - even if other items are closer or equally nearby. It’s one of the strongest grouping cues, alongside visible connections, and typically overrides proximity and similarity.

Also known as: law of common region, common region principle, enclosure

Prefer to watch? Watch the recap 0:30

The demo

Six dots in a row, evenly spaced. Draw a box around each pair and watch one row become three pairs - without a single dot moving.

One even row of six - the spacing gives no reason to group them either way.

What this demo shows (text version)

Six dots sit in a single row, equally spaced, so nothing about their distance suggests any particular grouping - you read one row of six.

Switching on "draw regions" places a tinted, rounded box around each adjacent pair. Immediately the row reads as three pairs, even though no dot has moved and the spacing is exactly as it was. The shared boundary does the grouping, overriding distance entirely - that is the Gestalt law of common region.

A shared boundary - a line or tinted panel around some items - makes them read as a group, even when other items are nearer. Use an enclosure when you need a clear group; it will override distance to do the grouping for you.

Common region is the workhorse of interface grouping: cards, fieldsets, tinted callouts, the zebra-striping of a table. It is how you say "these belong together" without leaning on spacing alone, and it can bind items that proximity never could.

Because enclosure is so strong, a stray border or background does real damage - bundling things that are unrelated, or splitting a set that belongs together. Draw regions deliberately: every box you add is a claim that the things inside it go together.