1 Learn the concept
Now that you have grasped the basics of layout and composition, it is time to look at grids, an essential feature for giving a design structure. A grid is a set of invisible lines that help you place and align elements. Grids make designs feel consistent and make it easier to work quickly and to change things later.
2 See it in action
- Columns divide the page vertically.
- Margins and gutters create space around and between elements.
- Align items to grid lines for order.
- Break the grid deliberately only for emphasis.
Worked example
Using a 12-column grid
Hero image: 12 columns wide.
Three benefits: 4 columns each.
Body text: 8 columns, centered.
Check: turn the grid on and confirm every element sits on a column line.
3 Study an example
Example scenario
A newsletter uses a three-column grid. Text, images and callouts always line up, so each issue looks consistent even when the content changes.
4 Apply it and download
- Draw a simple grid on a layout.
- Place your elements on it.
- Check the alignment.
Worksheet Brand style guide templateOpen, print or save as PDF