# Grids, Layout & Composition

**Track:** Design Foundations — Design & Human-Centered Design — proposed (25)
**Framework / surface:** design
**Level:** Intermediate
**Prerequisites:** Visual Hierarchy & Emphasis

**In one line:** Spatial systems and alignment — the rational armature beneath a composition.

## Theory, aesthetics & inspiration

A grid is the rational armature beneath a composition — a spatial system that converts a blank field into a set of aligned, proportioned relationships. Josef Müller-Brockmann codified the practice in "Grid Systems in Graphic Design" (1981), distilling the International Typographic Style that Swiss designers had forged in the 1950s into an objective discipline of columns, modules, and flowlines. The modular grid extends this into a matrix, so alignment and proximity become structure rather than decoration: elements that share an edge or a margin read as belonging together. The stance is that constraint enables clarity. Contemporary practice inherits it directly — CSS Grid translates Müller-Brockmann's modular thinking into the browser's layout engine.

## References

- [Josef Müller-Brockmann — Wikipedia](https://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann)
- [International Typographic Style — Wikipedia](https://en.wikipedia.org/wiki/International_Typographic_Style)
- [CSS Grid Layout Module Level 1 — W3C](https://www.w3.org/TR/css-grid-1/)