How to Use Grids in Layout Design: Column, Modular and Baseline Systems Explained

Most designers learn grids backwards. They download a 12-column template, drop the content in, and then wonder why the page feels stiff in some places and loose in others. A grid is not a decoration and it is not a template. It is a measuring system you build from your own content outward, and once you understand that, layout stops being guesswork. canva.com has covered this at length.

This guide breaks down the three grid systems that designers actually use day to day: column grids, modular grids and baseline grids. You will get concrete starting numbers for column counts, gutter widths and margins across editorial, poster and screen layouts, a repeatable process for deriving a grid from your content, and clear rules for breaking the grid when the content demands it.

What Is a Grid in Layout Design?

A grid is a consistent system of invisible guides that divides a page or screen into measurable parts so every element has a logical place to sit. It works at two levels at once:

• The macro level: margins and columns that define where content lives and where it does not.
• The micro level: a repeating unit of space (often tied to your body text leading) that governs vertical rhythm and small spacing decisions.

The purpose is not uniformity. It is decision reduction. A grid answers hundreds of small questions in advance (how wide should this caption be, how far below the headline does the intro start) so you can spend your attention on hierarchy, contrast and meaning.

The Vocabulary You Need First

Term	What it means
Margin	The empty frame between the edge of the page or screen and the content area.
Column	A vertical division of the content area. Text and images span one or several columns.
Gutter	The space between two columns. It keeps adjacent text blocks from visually merging.
Row / flowline	A horizontal division. Combine rows with columns and you get a modular grid.
Module	One cell of a modular grid. Groups of modules form a spatial zone.
Baseline	The invisible line each line of type sits on. Repeated at a fixed interval it becomes a baseline grid.
Measure	The line length of a text block, usually expressed in characters per line.

The Four Classic Grid Types (And Why Only Three Matter Daily)

Textbooks list four grid types. In practice, one of them is a special case and the other three do the real work.

Type	Structure	Best for
Manuscript	One single text block inside margins	Novels, essays, long uninterrupted reading
Column	Vertical divisions with gutters	Magazines, reports, websites, brochures
Modular	Columns plus rows, creating cells	Catalogues, dashboards, calendars, image-heavy spreads
Hierarchical	Irregular zones sized to content importance	Posters, landing pages, editorial openers

A manuscript grid is really a one-column grid, and a hierarchical grid is usually a column or modular grid used loosely. So the three systems worth mastering are column, modular and baseline. They stack: a serious editorial layout uses all three at the same time, a column grid horizontally, a baseline grid vertically, and modules where images need to align.

Build the Grid From the Content, Not From a Template

This is the part most tutorials skip. Before you set a single guide, interrogate your content. Here is the sequence we use in the studio when laying out exhibition panels, catalogues and web pages for figure and sculpture projects.

1. Inventory every content type. List them: headline, deck, body, pull quote, caption, credit line, sidebar, table, full-bleed image, portrait image, logo. Note approximate word counts and image aspect ratios.
2. Set the body text first. Choose typeface, size and leading, then find a comfortable measure of 45 to 75 characters per line for print and 45 to 90 for screen. That measure is your first real constraint, and it gives you a target column width.
3. Divide the content area by that width. If your comfortable text block is roughly a third of the page, you have a 3-unit rhythm. Then multiply for flexibility: 3 becomes 6 or 12.
4. Choose a column count with useful divisors. A grid you cannot subdivide is a cage. Twelve columns split into 2, 3, 4 and 6. Ten columns only split into 2 and 5.
5. Derive the gutter from the leading. Gutters are not arbitrary. Use your body leading, or a simple fraction of it, so horizontal and vertical spacing feel related.
6. Set margins last and set them generously. Margins are the frame that makes the content look intentional. Tight margins read as amateur; they also fail in print, where trimming and binding eat a few millimetres.
7. Stress test with your worst content. Lay out the longest headline, the widest table and the most awkward image crop. If the grid survives those, it will survive everything else.

Why This Order Matters

Starting from a downloaded template means the template’s assumptions become your design decisions. A 12-column, 1440px web grid assumes a certain content density. A three-column magazine grid assumes short blocks and lots of captions. If your content does not match those assumptions, you will fight the grid on every page. Deriving the grid from your own measure, image ratios and hierarchy means the system serves the content instead of the reverse. A comparable breakdown sits on figma.com.

System 1: Column Grids

A column grid organises content into evenly spaced vertical columns separated by gutters. It is the workhorse system: fast to build, flexible, and instantly readable to any collaborator.

Choosing a Column Count

Context	Recommended columns	Why
Book, single-column report	1 or 2	Long-form reading, minimal interruption
Magazine, annual report	6 (text spans 2 or 3)	Allows 2, 3 and asymmetric splits with a narrow caption column
Newspaper, dense editorial	8 to 12	Many short stories per page need fine granularity
Poster, exhibition panel	3 to 5	Read at distance, few elements, big contrasts
Website desktop	12	Industry standard, divides cleanly, maps to CSS frameworks
Tablet	8	Keeps column widths readable at mid viewport
Mobile	4	Enough for halves and quarters, no more needed

A rule that saves time: pick a number with at least three divisors. 6, 8 and 12 are excellent. 12 is popular because it splits into 6, 4, 3 and 2, which covers almost every asymmetric arrangement you will ever need.

Setting Gutter Widths

The gutter has one job: prevent the last word of one column from touching the first word of the next. Too narrow and columns bleed together, too wide and the page fragments. visme.co has covered this at length.

• Print starting point: gutter equals one line of leading. Body set at 10/13 pt gives a 13 pt gutter, roughly 4.5 mm.
• Practical print range: 4 to 6 mm for A4 and similar. Below 3 mm the eye jumps columns; above 8 mm the text block loses cohesion.
• Screen starting point: 24 px on desktop, 16 px on mobile. Range of 16 to 32 px covers most cases.
• Scale with column count: more columns means each column is narrower, so keep gutters proportionally tighter or the content area disappears into white space.
• Justified text needs more gutter than ragged-right text because the hard right edge sits closer to the neighbouring column.

Setting Margins

Margins are where amateurs and professionals separate most visibly. Generous margins signal confidence.

• A4 print, single sided: 15 to 20 mm minimum on all sides, 25 mm at the foot if you use folios.
• Bound publications: increase the inner margin. A classic asymmetric set is inner 20 mm, top 18 mm, outer 22 mm, bottom 28 mm. The extra inner space compensates for the binding, the extra bottom space stops content looking like it is sliding off the page.
• Posters: margin should be at least equal to the height of your largest cap. For large formats, 3 to 5 percent of the shorter side is a safe floor.
• Desktop web: a fixed content area (for example 1200 px) inside a fluid page, or side margins of 5 to 8 percent of viewport width.
• Mobile web: 16 to 24 px side margins. Below 16 px, text feels cramped against the device bezel.

Asymmetric Column Grids

Symmetric grids repeat the same measure across the page. Asymmetric grids assign different roles to different columns, and they are far more interesting. A common editorial move: a 6-column grid where body text occupies columns 2 to 5, column 1 carries captions, notes and small images, and column 6 stays deliberately empty as a breathing zone. The result feels designed rather than filled.

System 2: Modular Grids

Add horizontal flowlines to a column grid and you get modules. Each module is a cell, and groups of adjacent cells form zones. This gives you control in both directions, which is exactly what you need when images, data and text must coexist.

When a Modular Grid Beats a Column Grid

• Product catalogues where every item needs an identical footprint
• Data-heavy pages: tables, timelines, comparison charts
• Card-based interfaces, dashboards and CMS-driven templates
• Exhibition and museum panels where captions must align across a wall run

How to Build One in Five Steps

1. Start with the column grid you already derived from your measure.
2. Decide the module aspect you need. Look at your dominant image ratio. If most images are 3:2 landscape, build modules that group into 3:2 blocks.
3. Divide the content height into rows using the same gutter value you used horizontally, so spacing reads as one system.
4. Check the row count against your baseline. Each row height should be a whole multiple of your leading, otherwise text will drift off the baseline grid inside modules.
5. Name your zones. For example: header spans 12 columns by 2 rows, feature image 8 by 4, sidebar 4 by 6. Naming zones turns a grid into a layout language your whole team can use.

A practical starting configuration for an A4 catalogue page: 6 columns, 8 rows, 4.5 mm gutters, 18 mm margins. That gives 48 modules, enough granularity for one, two, three or six items per page without ever redrawing the grid.

System 3: Baseline Grids

A baseline grid is a set of evenly spaced horizontal lines that every line of text sits on. It is the least visible and most powerful of the three systems, because it creates vertical rhythm across columns, pages and screens.

How to Set a Baseline Grid Correctly

1. Set your body text first. Say 10 pt type on 13 pt leading.
2. Make the baseline increment equal the body leading. Here, 13 pt. Every element in the layout now snaps to a 13 pt rhythm.
3. Make all other leading a multiple or clean fraction. Captions at 8/13 pt keep the same rhythm. A headline at 30/39 pt occupies exactly three baselines.
4. Space blocks in whole increments. Space before a subhead becomes 13 pt or 26 pt, never 15 pt.
5. Align the first baseline to the top margin so facing pages and adjacent columns match line for line.

The Screen Equivalent: An 8 Point Spacing Scale

Digital work rarely uses a strict baseline grid because dynamic content breaks it. Instead, use a spacing scale based on a base unit of 4 or 8 px: 4, 8, 16, 24, 32, 48, 64. Set line heights as multiples of that unit (body at 16/24 px, for example) and the effect is close to a baseline grid while remaining flexible. Pair it with your column grid and you have full two-axis control on screen.

Common Baseline Mistakes

• Setting the baseline increment smaller than the body leading, which forces text to skip lines and doubles your spacing.
• Locking every element to the baseline including images, which produces awkward gaps. Lock text; align images to columns and flowlines.
• Forgetting that space before a paragraph must also be a whole increment, otherwise the entire page below it drifts.

Grid Recommendations by Medium

Project	Columns	Gutter	Margins	Baseline
A4 magazine spread	6 per page	4.5 mm	Inner 20, top 18, outer 22, bottom 28 mm	Yes, equal to body leading
A5 booklet	4 per page	4 mm	Inner 15, outer 16, top 15, bottom 20 mm	Yes
A2 poster	3 to 4	8 to 12 mm	20 to 30 mm all round	Optional, use flowlines instead
Exhibition wall panel	4 to 6	15 to 25 mm	Min 50 mm, keep text above 1.2 m from floor	Yes, for caption runs
Website desktop	12	24 px	5 to 8 percent of viewport	8 px spacing scale
Website mobile	4	16 px	16 to 24 px	8 px spacing scale
Slide deck 16:9	12	20 px	60 to 80 px	Simple 8 px scale

Setting Up Grids in Your Tools

Layout Grids in Figma

1. Select the frame, then in the right panel click the plus next to Layout grid.
2. Switch the type from Grid to Columns. Set count, gutter and margin.
3. Choose Stretch for responsive frames so columns flex with the frame width, or Center with a fixed column width for a capped content area.
4. Add a second layout grid set to Rows if you need a modular structure.
5. For a baseline effect, add a Rows grid with height set to your line height, gutter 0, and lower the opacity so it stays readable.
6. Save each configuration as a grid style named by breakpoint, for example Desktop 12 col, Tablet 8 col, Mobile 4 col. Then apply styles instead of retyping numbers.

Grid Systems in InDesign

1. Set document margins and columns at creation, or later via Layout > Margins and Columns.
2. Define the baseline grid in Preferences > Grids: set Start to your top margin, Relative To to Top Margin, and Increment Every to your body leading.
3. In your body paragraph style, enable Align to Baseline Grid under Indents and Spacing.
4. Add horizontal ruler guides at your flowlines and save them into a master page so every page inherits the same structure.
5. Use Layout > Create Guides to generate rows and columns at once when building a modular grid.
6. Turn on View > Grids and Guides > Show Baseline Grid while working, and hide it before presenting.

How to Break the Grid on Purpose

A grid you never break produces layouts that are correct and forgettable. The point of a system is that deviation becomes meaningful. But there is a difference between breaking a grid and not having one. one agency that does this well treats this as a baseline.

Three Rules for Intentional Grid Breaks

1. Break once per layout, twice at most. A single element crossing the grid reads as emphasis. Five elements crossing it read as chaos.
2. Break big, not slightly. An image that overhangs a column by 3 mm looks like a mistake. One that bleeds fully off the page looks like a decision. Ambiguity is the enemy.
3. Keep one anchor. If an element breaks horizontally, keep it aligned vertically to a flowline or baseline. The retained alignment tells the reader the break was deliberate.

Breaks That Reliably Work

• Full bleed: a hero image running past all four margins while the text below stays strictly on grid.
• Overhang: a pull quote or display number extending into the outer margin, aligned to the baseline grid.
• Overlap: a headline crossing the boundary between image and text zones, tying the two together.
• Rotation: one rotated element in an otherwise orthogonal layout, positioned so its centre sits on a grid intersection.
• Deliberate void: leaving an entire module or column empty where the reader expects content.

Breaks That Usually Fail

• Nudging text a few pixels to make a widow disappear, which quietly destroys the baseline rhythm across a spread.
• Different margins on every page of the same document with no editorial logic.
• Breaking the grid on the page where the reader most needs to scan, such as an index, table of contents or product list.
• Breaking it because the content did not fit. That is not a break, that is an editing problem.

Testing Your Grid Before You Commit

• The three layout test: build three genuinely different layouts on the same grid. If you cannot, the grid lacks divisors.
• The squint test: blur the page. Blocks should form clear groups with even spacing, not clumps and gaps.
• The worst content test: longest headline, widest table, tallest portrait image, shortest caption.
• Print it, or view it at real distance. For panels and posters, step back to actual viewing distance. Grids that work on a monitor sometimes collapse at three metres.
• Hand it to someone else. If a colleague can place new content correctly without asking questions, the grid is documented well enough to survive the project.

Frequently Asked Questions

What is a grid in layout design?

A grid is a system of invisible guides, made up of margins, columns, gutters and often rows, that divides a page or screen into consistent measurable units. It gives every element a logical position, creates visual rhythm, and speeds up decision making by answering routine spacing questions in advance.

What are the four types of grids?

Manuscript (one single text block), column (vertical divisions with gutters), modular (columns plus rows forming cells) and hierarchical (irregular zones sized to content importance). In daily practice, column, modular and baseline grids do most of the work, and complex layouts combine all three.

How do I use layout grids in Figma?

Select a frame, click the plus beside Layout grid in the right panel, and change the type to Columns. Set the count, gutter and margin, then choose Stretch for fluid frames or Center for a fixed content width. Add a second Rows grid for modular structure, and save each setup as a named grid style per breakpoint.

How do you set up a grid system in InDesign?

Define margins and columns in Layout > Margins and Columns, then set your baseline grid in Preferences > Grids with the increment equal to your body leading and Relative To set to Top Margin. Enable Align to Baseline Grid in your body paragraph style, add flowline guides, and store everything on a master page.

How many columns should a grid have?

Choose a number with several divisors so you can subdivide freely. Twelve is standard for desktop web, six works well for magazines and reports, four for mobile screens, and three to five for posters and large panels. Then derive column width from a comfortable measure of 45 to 75 characters per line.

How wide should gutters be?

Start with one line of leading. Body text at 10/13 pt suggests a 13 pt gutter, roughly 4.5 mm, and a practical print range of 4 to 6 mm. On screen, 24 px on desktop and 16 px on mobile are reliable starting points. Justified text needs slightly wider gutters than ragged-right text.

Do I need a baseline grid for web design?

A strict baseline grid is difficult on screen because content is dynamic. Use a spacing scale based on a 4 or 8 px unit instead, with line heights set as multiples of that unit. You get most of the vertical rhythm benefits while remaining flexible across breakpoints.

Is it ever acceptable to break the grid?

Yes, when the break carries meaning. Break once per layout, break decisively rather than slightly, and keep at least one alignment intact so the reader recognises the deviation as intentional. A full-bleed image or a pull quote overhanging into the margin are dependable examples.

Key Takeaways

• Set your body text and measure first, then derive columns from it. Never start from a downloaded template.
• Pick column counts with multiple divisors: 4, 6, 8 or 12.
• Tie gutters to your leading so horizontal and vertical spacing belong to one system.
• Be generous with margins, and increase the inner margin on anything bound.
• Use a column grid for flow, a modular grid for two-axis control, and a baseline grid for vertical rhythm.
• Break the grid rarely, decisively, and always with one alignment retained.

A grid built this way is not a constraint. It is the fastest route to layouts that look composed rather than assembled, whether you are producing a catalogue, a poster or a set of exhibition panels.