Grid System
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
Grid system is a structural framework of columns, gutters, and margins that a layout's content is placed onto, so that spacing and alignment decisions are made once, at the system level, rather than re-improvised on every screen. The modern typographic grid comes out of the Swiss/International Typographic Style of the mid-20th century (Josef Müller-Brockmann's Grid Systems in Graphic Design, 1981, is the canonical reference), and the same logic that organized a print poster's margins now organizes a responsive web layout's breakpoints.
On the web, the grid usually means a fixed number of columns (12 is the conventional default, since it divides cleanly into halves, thirds, and quarters) with a gutter width between them, implemented today with CSS Grid or Flexbox rather than the float-based hacks that preceded them. The practical payoff shows up in consistency users never consciously register: two unrelated pages built on the same grid share the same rhythm of alignment even if a human never compared them side by side, because both were constrained by the same column boundaries rather than eyeballed independently.
Grids interact directly with Responsive Breakpoints — a 12-column grid at desktop width commonly collapses to 4 columns at tablet and a single column at mobile, and the content's column-span assignments have to be redefined at each breakpoint rather than just visually shrinking. They also give Gestalt Principles something concrete to work with: alignment along a shared grid line is one of the strongest proximity/common-region cues going, which is why misaligned elements read as "off" even to someone who couldn't say why.
The main risk of a grid system is treating it as decoration rather than constraint — a grid that every layout quietly ignores whenever it's inconvenient isn't providing consistency, it's providing the appearance of a system without the discipline one requires.
See also7
Typographic Scale
A constrained set of type sizes and their paired line heights and spacing.
Design & Interface17 connections
Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
Design & Interface22 connections
Container Query
Styling based on the size of an element's container rather than the viewport.
Design & Interface13 connections
Lorem Ipsum
The scrambled Latin filler typesetters and designers use to show a layout before the real words exist, useful for judging type and dangerous because it hides what real content will do to the design.
Design & Interface6 connections
Aspect Ratio
The proportion of an image's width to its height, from early film's nearly square frames through cinema's widescreen answer to television, the 16 by 9 compromise, and the vertical video of phones.
Graphics & Rendering4 connections
Flexbox
The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.
Design & Interface10 connections
Box Model
The rule that every element on a web page is a rectangle of content wrapped in padding, border, and margin, and the two quirks, box sizing and collapsing margins, behind most surprises in CSS spacing.
Design & Interface10 connections
Linked from9
- Aspect RatioGraphics & Rendering
The proportion of an image's width to its height, from early film's nearly square frames through cinema's widescreen answer to television, the 16 by 9 compromise, and the vertical video of phones.
- Box ModelDesign & Interface
The rule that every element on a web page is a rectangle of content wrapped in padding, border, and margin, and the two quirks, box sizing and collapsing margins, behind most surprises in CSS spacing.
- CSS GridDesign & Interface
The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.
- FlexboxDesign & Interface
The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.
- Gestalt PrinciplesDesign & Interface
A set of perceptual rules describing how the eye groups discrete elements into wholes before conscious analysis begins.
- KerningDesign & Interface
The per-pair adjustment of horizontal space between two specific letters, distinct from uniform spacing applied across a whole string.
- Lorem IpsumDesign & Interface
The scrambled Latin filler typesetters and designers use to show a layout before the real words exist, useful for judging type and dangerous because it hides what real content will do to the design.
- Tiling Window ManagerDesign & Interface
A window manager that arranges windows automatically into non-overlapping tiles and is driven mainly from the keyboard, trading freeform placement for zero layout effort.
- Visual HierarchyDesign & Interface
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.