# Group by meaning before drawing containers

ID: cmp-semantic-grouping. Pilot lesson. Sources: [S01](https://every-layout.dev/rudiments/composition/), [S03](https://www.nngroup.com/articles/gestalt-proximity/).

Teach grouping through proximity, shared alignment, whitespace, rules, or enclosure. Decide which items belong together before choosing a card or background. Use for labels, descriptions, captions, prices, actions, and proof. Avoid visually equating unrelated information.

Application A: image, project location, note, and service link form one evidence group through caption alignment. Application B: service name and scope form an unboxed entry separated from neighbors by a rule.

Counterexample: a quotation appears closer to the wrong project and seems to endorse it.

Mobile: captions stay with referents; within-group spacing remains distinguishable from spacing between groups. Containers may disappear without losing meaning.

Storyboard: identify meaningful element groups and their relationships. Review: determine which items appear associated and whether this matches the actual content.

## Authority and use

This is an original design-teaching hypothesis. It is advisory and does not change factual, accessibility, or functional requirements. Adapt it to verified business evidence and inspect the current render before accepting an outcome. The applications above are contrasting examples, not copyable site presets.