laws & principles
Gestalt: proximity vs common region
What's the difference between Gestalt proximity and common region?
Both group separate items, but in different ways. Proximity groups by closeness - things near each other belong together. Common region groups by shared space - items within one boundary belong together, even if something closer lies outside. When they conflict, the boundary usually takes precedence.
Also known as: proximity vs common region
Prefer to watch?
Watch the recap 0:42
The demo
Four dots, sitting as two close pairs. Proximity pairs them by distance - then draw a boundary around the two that are farthest apart and watch which rule wins.
Proximity at work: two pairs, A with B and C with D, grouped by nothing but how close they sit.
What this demo shows (text version)
Four dots sit as two close pairs - the first two together, the last two together, with a wider gap in the middle. By proximity, you read two pairs: distance does the grouping.
Switching to "grouped by a boundary" draws a region around the two middle dots - which are the farthest apart of any pair - and they immediately read as a group, even though no dot has moved. Common region has overruled proximity. Proximity groups by distance and needs no marks; common region groups by enclosure and, when the two conflict, the boundary wins.
Both proximity and common region group items - proximity by distance, common region by shared space. When they conflict, the boundary usually wins, so a panel or card can group items that are far apart and override what closeness alone suggests. You can see and try this in action on this page.
Same four dots, same distances - but draw a line around the two that sit farthest apart and they snap into a pair, overruling the spacing entirely. That is the order of power: a boundary beats nearness.
Reach for proximity first - it groups with nothing but space, no lines or boxes to clutter the layout. Common region is the heavier tool: a card, a border, a tint. Because it overrides distance, it is what you use when spacing alone can't make the grouping you need, or when you must group items that cannot sit close together.
The trap is using both and letting them fight. A border that cuts across a tight cluster, or a card that splits a related pair, sends two contradictory grouping signals - and the boundary wins, usually not the way you intended. Make them agree.