LAYOUT & COMPOSITION
Give ideas structure.
Composition determines how information is organized and how the eye moves through a design.
Learn how designers use grids, alignment, scale, white space, hierarchy, proportion, and visual relationships to transform separate elements into a unified system.
Good composition doesn't simply organize a page. It helps people understand it.
The types of grid layouts
A grid is the invisible structure under a page. It decides where things can go, how they line up, and how the eye moves through them. Different content needs different grids. Here are the main types and when to use each.
The step-by-step guide
- 01
Manuscript grid
One big text block surrounded by margins. It's the simplest grid, made for long, continuous reading: books, essays, reports. The work is in choosing margins and line length so the page feels calm and easy to read.
- 02
Column grid
The page is split into vertical columns separated by gutters. Content can span one column or several. Magazines, newspapers, and most websites use it because it handles text, images, and captions side by side while keeping everything aligned.
- 03
Modular grid
A column grid with horizontal rows added, which gives you a field of modules. It suits complex content that needs control both ways: catalogs, timetables, posters, dashboards, product listings. It's the classic Swiss-style grid.
- 04
Baseline grid
Evenly spaced horizontal lines that every line of text sits on. It keeps type lined up across columns and pages, so a spread looks orderly even when the content is dense. Usually it's combined with a column or modular grid.
- 05
Hierarchical grid
Columns and areas are placed where the content needs them, not repeated evenly. Home pages and editorial layouts often use it to give a feature more room than the rest. It's flexible, but it still needs consistent alignments.
- 06
Compound grid
Two or more grids layered together, for example a 4-column and a 6-column grid on the same page. It lets one layout switch rhythms (halves, thirds, quarters) and still feel unified. Good for long publications with varied content.
- 07
Responsive and fluid grids
On screens the grid changes with the viewport: 12 columns on desktop, 8 on tablet, 4 on phone. Columns stretch in proportion and content reflows at breakpoints. Designing for screens means planning how the layout behaves at every size, not just one.
- 08
Breaking the grid
Once the structure is clear, you can break it on purpose. An image that bleeds off the edge or a headline that crosses columns gets attention because everything else lines up. Breaks only work when the grid around them holds.