What a grid is
A grid is an invisible set of guide lines that you use to place things. Instead of deciding the position of every element from scratch, you divide the available space into regular parts and snap items to them. The result is that edges line up, spaces repeat and the page feels organized without the viewer noticing why.
Grids are old tools. Printers and editors have used them for generations, and they now sit behind most websites, slide templates and social graphics. You do not need to be a designer to use one; a basic version is enough to improve most layouts.
The vocabulary
- Margins. The empty space around the outside edge of the page. Margins keep content from crowding the edge.
- Columns. Vertical strips that hold content. A text-heavy page may have one or two; a page with images and captions may have more.
- Gutters. The gaps between columns. They keep neighboring content from running together.
- Rows or modules. Horizontal divisions that, combined with columns, produce a pattern of cells.
- Baseline. An optional horizontal line that text sits on. Aligning text to a shared baseline across columns gives a tidy rhythm.
Some tools show these as overlays you can turn on while you work. Others use “snap to guides,” which is the same idea.
Why a grid helps
A grid supports three of the habits from the overview of design principles at once.
- Alignment. Elements that follow the same columns line up automatically.
- Repetition. The same column widths and spacing appear on every page or slide.
- Proximity. Gutters and margins create reliable gaps, so related items cluster together and unrelated items stay apart.
It also saves time. Once the grid exists, you can place new content quickly, and several people can work on the same project and still produce matching results. This is a practical route to the cohesion discussed under consistency and visual identity.
Choosing a simple grid
For most everyday content, you need only a few options.
- Single column. Ideal for articles and phone screens. Text and images share one width, and the reading path is clear.
- Two columns. Useful for text beside an image, or comparisons. Equal columns feel balanced; an uneven split, such as one narrow and one wide, feels more dynamic.
- Three or four columns. Useful for galleries, cards or dashboards. Items can span one column or several.
- Twelve columns. A popular choice for web layouts because twelve divides evenly into halves, thirds, quarters and sixths. It gives flexibility without a new grid for every layout.
Pick the smallest number of columns that supports your content. A more complex grid is not a better one.
Using the grid on a slide
Slides are a good place to practice. A simple approach:
- Set margins that are wide enough to feel calm, and keep them the same on every slide.
- Divide the slide into, say, a 12-column or 6-column grid.
- Place titles in the same position on every slide.
- Align text and images to column edges, and let pictures span whole columns, not half of one.
- Leave one or two columns empty when you can; empty space is part of the layout.
When someone clicks through the deck, titles that do not jump around make the whole thing feel steadier.
Layout beyond the grid
A grid is the structure. Layout also covers where emphasis goes and how the eye travels. Readers in left-to-right languages often begin near the top left and move down, though attention can be redirected by size, color and position, which is the subject of the article on visual hierarchy. Many readers skim, and scanning behavior tends to follow the edges and starts of blocks, which a grid makes predictable. Whitespace is another essential layout element. Generous white space around a group makes it stand out, and it gives the eye time to rest.
On small screens, grids usually collapse. Several columns on a desktop typically stack into one on a phone. When you design a graphic or page that must work in both, decide how the order should change, and check that the reading sequence still makes sense when stacked. The related article on designing images for small screens covers more of this.
Breaking the grid on purpose
Rules make good defaults, and a deliberate break can add interest. An image that bleeds off the page edge, a headline that spans extra columns or a pull quote that steps outside the text column can all draw attention. These work because the grid is there to be contrasted with. If you break the grid everywhere, the effect disappears. Photo placement follows the same logic as image composition: know the rule, then bend it deliberately. Break it once per page or slide at most, and make the break clear.
Common mistakes
- Using different margins on different pages.
- Stretching images to fit a space and distorting them. Crop instead.
- Packing every cell. Empty cells are allowed.
- Centering some elements and left-aligning others without reason.
- Changing the grid halfway through a project.
Getting started
Open any layout you made recently and add guide lines at the margins and at the column edges. You will probably see elements that nearly line up but miss by a few pixels. Moving them onto the guides is often the fastest improvement available. Grids are aids to judgment, not replacements for it, so adjust by eye and check the result with fresh eyes the next day.