Layout and Grids: How to Organize Any Design | Free Graphic Design Course: From Beginner to Advanced

What you'll learn

Organize any piece with margins, columns and gutters.
Calculate a grid for print (in inches and points) and for the web (in pixels).
Create focal points and direct the eye with composition.
Keep spacing consistent with a spacing system.
Set up grids and guides in Figma, Canva, Affinity or InDesign instead of aligning by eye.

📥 Practice this lesson

The grid calculator does this lesson's math for you: enter the format width, margins, columns and gutter.

design-calculators-and-checklists.xlsx · Calculators tab, Grid section

You already know the principles (lesson 2), color (lesson 3) and typography (lesson 4). Layout, or composition, is the art of placing all of that in space. The tool professionals use to do it quickly and consistently is the grid: an invisible structure of guidelines that decides where each element goes. This lesson opens the Intermediate level.

Set the format
Fix the margins
Calculate the columns
Pick the focal point
Space with a system

Why use a grid

Order

Everything lines up with something, so the piece looks professional.

Speed

You don't decide the position of every element from scratch.

Consistency

Multiple pages or pieces share the same structure.

Flexibility

One grid supports many different layouts.

A grid isn't a cage: once you master it, you can break it on purpose (an image that bleeds past the columns, a headline that crosses two modules) to create tension and interest.

The parts of a grid

Part	What it is
Format	The overall size: Letter (8.5 × 11 in), 1080 × 1350 px, a 1440 px-wide screen…
Margins	The space between the edge and the content. They give breathing room and protect content from trimming.
Columns	Vertical divisions where text and images sit.
Gutter	The space between columns.
Modules	The cells created when you also divide the page into rows.
Baseline grid	A fine horizontal grid that keeps lines of text aligned across columns (mostly in editorial design).

Types of grids

Type	Structure	Best for
Manuscript	A single column	Books, articles, letters
Column	2 to 6 columns (12 on the web)	Magazines, brochures, websites
Modular	Columns and rows that form modules	Catalogs, newspapers, dashboards, image-heavy pieces
Hierarchical	Zones of different sizes based on importance	Home pages, posters

Calculate your grid

Print: a Letter-size brochure page

In print layout apps, U.S. designers often work in points and picas: 72 points = 1 inch and 12 points = 1 pica. A Letter page is 8.5 in wide, or 612 pt. With 0.5 in (36 pt) side margins and 3 columns with 1-pica (12 pt) gutters:

Live width   = 612 − 36 − 36      = 540 pt
Gutters      = 2 × 12             = 24 pt
Column width = (540 − 24) ÷ 3     = 172 pt  (≈ 2.39 in)

In InDesign, Affinity or Illustrator you set this up when you create the document (margins and columns) or with guides.

Web: the 12-column grid

The web relies on the 12-column grid because 12 divides by 2, 3, 4 and 6: you can build half-width blocks, thirds or quarters. With a 1,200 px container and 24 px gutters:

Gutters      = 11 × 24 = 264 px
Column width = (1,200 − 264) ÷ 12 = 78 px
Check        = 12 × 78 + 264 = 1,200 px

A text block spanning 8 columns is 8 × 78 + 7 × 24 = 792 px wide; a 4-column sidebar, 4 × 78 + 3 × 24 = 384 px; and a 24 px gutter sits between them (792 + 24 + 384 = 1,200). On phones, the grid usually drops to 4 columns and blocks stack (lesson 11).

1. A 24 × 36 in poster has 1.25 in margins on each side and 4 columns with 0.5 in gutters. How wide is each column?

5.375 in
6 in
5 in

Live width: 24 − 2.5 = 21.5 in. Gutters: 3 × 0.5 = 1.5 in. Columns: (21.5 − 1.5) ÷ 4 = 5 in. 5.375 in forgets the gutters, and 6 in ignores both margins and gutters.

Focal point and the path of the eye

Every composition needs a focal point: the element people see first. You create it with contrast in size or color, isolation (space around it) or a strong image (especially faces and gazes: we look where the person in the photo is looking). From there, the layout guides the eye through the rest of the information (lesson 2: Z and F patterns).

The rule of thirds

Divide the format into three equal parts horizontally and vertically. The four points where the lines cross are natural spots for the focal point; placing the main element on one of them usually feels more dynamic than centering it. It's especially useful in photography and in pieces with one dominant image. The golden ratio is often cited for the same purpose, but it isn't a magic formula: thirds and a good grid solve the vast majority of cases.

Scale and tension

Strong scale contrasts (a huge headline next to small text, an image filling two-thirds of the page) add energy. Layouts where everything is about the same size feel flat.

2. Why is the 12-column grid so common in web design?

Because screens are divided into 12 parts.
Because 12 divides by 2, 3, 4 and 6, which allows many block combinations.
Because HTML requires it.

Its flexibility gives you halves, thirds and quarters with the same structure.

A spacing system

Just like font sizes, define a scale of spacing values and stick to it. In digital design the 8-point system is very common: every margin, padding and gap is a multiple of 8 (8, 16, 24, 32, 48, 64…), with 4 px for fine adjustments. The benefits: consistency, faster decisions and an easy shared language with developers.

Small space between related elements (a heading and its text: 8–16 px).
Medium space between groups (24–32 px).
Large space between sections (48–96 px).

This applies the principle of proximity (lesson 2) systematically.

Layout step by step: a 1080 × 1350 px post

80 px margins (all important text inside, so the platform's interface elements don't cover it).
A 6-column grid inside the live area.
Focal point: the product photo in the top two-thirds, with the product on a rule-of-thirds point.
A large headline spanning 4 columns, left-aligned.
Price and call to action in the lower right third (the end of the Z path).
A small logo at the bottom left.
Spacing from the 8 px scale.

Margins and columns 80 · 140 · 1680 px margins; 6 columns of 140 px with 16 px gutters: 6 × 140 + 5 × 16 = 920 px of live width.
Thirds 360 / 720 · 450 / 900The product sits on the upper right intersection, not in the center.
Headline 4 columnsLeft-aligned, on the same margin as the logo.
Price and action end of the ZIn the lower right third, where the eye's path ends.

The step-by-step layout of the 1080 × 1350 post, drawn to scale. The colored lines don't appear in the final piece: they're the invisible structure.

3. When is it OK to break the grid?

On purpose, to highlight one element or create tension, while everything else respects the structure.
Never.
Whenever an element doesn't fit.

Breaking the grid works because it contrasts with the overall order; if everything breaks it, there's no order left to break.

Case study: a textile shop's wholesale catalog

A handwoven textile shop in Santa Fe, New Mexico (illustrative case) built its 20-page wholesale catalog by copying the previous page and nudging photos around "until it looked right." Every page had different margins, the blankets and rugs appeared at different sizes and the prices kept moving. Boutique buyers in Denver and Austin complained that it was hard to compare products.

The fix was a modular grid on a landscape Letter page (11 × 8.5 in, or 792 × 612 pt): 0.5 in (36 pt) margins, 4 columns and 3 rows, with 12 pt gutters. With those measurements, each module is (720 − 36) ÷ 4 = 171 pt wide (2.375 in) and (540 − 24) ÷ 3 = 172 pt tall (about 2.39 in). The system's rules were simple:

Standard product: 1 module for the photo, with name, technique and price below it, always in the same position.
Featured product: 2 × 2 modules, at most one per page.
Section opener: a photo spanning all 4 columns at full height, which breaks the rhythm on purpose.

The before and after explains itself: before, every page was a brand-new decision; after, the designer only decides which module each product gets. Buyers always find the price in the same spot, and the shop can update the catalog every season by swapping photos and text, without redesigning anything.

Set up the grid in your software

Don't draw columns by hand with rectangles. In Figma, add a layout grid (columns) to each frame from the design panel; in Affinity, use the guides manager (columns, rows and gutters); in InDesign, set margins and columns when you create the document; and in Canva, add column guides from the file settings. Then turn on snapping so elements lock onto the columns by themselves.

4. A 1080 px-wide post has 80 px margins on each side and a 6-column grid with 16 px gutters. How wide is each column?

153 px
140 px
160 px

Live width: 1080 − 160 = 920 px. Gutters: 5 × 16 = 80 px. Columns: (920 − 80) ÷ 6 = 140 px. The typical mistake (153 px) is forgetting to subtract the gutters.

Common layout mistakes

Different margins on every page or every piece in the campaign.

Define the margins once and save them in a template.

Text jammed against the edge "to use the space."

Respect the margin: breathing room also signals quality.

Always centering the main element.

Try placing it on a rule-of-thirds point for more energy.

Random spacing: 13 px here, 21 px there.

Use a scale (8, 16, 24, 32, 48…) and repeat it.

Breaking the grid with several elements at once.

One intentional break, and everything else in order.

Practice exercise: three layouts on the same grid

Create a 1080 × 1350 px document with 80 px margins and a 6-column grid.
With the same content (a photo, a headline, a short line of text, a price and a logo), create three different layouts that respect the grid.
In one of them, break the grid on purpose with a single element.
Ask three people what they see first in each version.

See solution: three possible layouts

A · Dominant image: photo across 6 columns, top two-thirds; headline
    and price below in 4 columns on the left; logo on the right.
B · Split: photo in the 3 right-hand columns at full height;
    headline, text and price in the 3 left-hand columns, vertically
    centered.
C · Type-led with a break: huge headline across 6 columns at the top;
    a cut-out product photo that overlaps the headline (breaking the
    grid); price in a colored circle on a rule-of-thirds point.

Summary

A grid organizes a piece with a format, margins, columns, gutters and modules.
Column width = (live width − total gutters) ÷ number of columns; in print, remember 72 pt = 1 in.
The 12-column grid is the web standard; print usually uses 2 to 6 columns.
Create a focal point and use the rule of thirds and strong scale contrast.
A spacing system (like multiples of 8 px) applies proximity consistently.

Next lesson: Images, File Formats and Resolution: Vector vs. Raster, PPI, JPG, PNG and SVG. You'll learn to calculate resolution so prints never look pixelated, and to choose the right file format for every use.