A document grid is a set of margins, columns and guide lines that decides where every object may sit. Placing images and text blocks to the grid, not by eye, gives neat edges and equal spacing in posters, newsletters and web layouts.
All file names, sizes and documents in this lesson are invented for practice. Menu names differ between programs and versions, so the steps below describe the feature, not one brand’s buttons.
How does a grid work?
The margins set the usable area. The columns divide that area into equal widths, separated by gutters, the gaps between columns. Objects are sized to span whole columns, with their edges snapped to column edges or guides.
Column width follows a simple formula: (usable width − total gutter width) ÷ number of columns.
How do you build and use a grid?
- Set the page size and margins.
- Calculate the usable width.
- Choose the number of columns and the gutter.
- Add guide lines, or set columns in the page layout.
- Turn on snapping and place each object against the guides.
- Check alignment with a zoomed-in view.
Worked example
An invented A4 newsletter page is 210 mm wide with 20 mm margins left and right. The design uses 4 columns with 6 mm gutters.
Step 1: usable width = 210 − 20 − 20 = 170 mm.
Step 2: 4 columns need 3 gutters: 3 × 6 = 18 mm.
Step 3: column width = (170 − 18) ÷ 4 = 152 ÷ 4 = 38 mm.
Step 4: a picture spanning 2 columns is 2 × 38 + 6 = 82 mm wide, because it covers the gutter between them. Its left edge sits on the margin.
Step 5: check the full row: 4 × 38 + 3 × 6 = 152 + 18 = 170. It matches the usable width.
The mistake to watch for
The student drags the picture until it looks right and leaves it 3 mm inside the left margin.
Mistaken result: the picture edge and the text edge differ by 3 mm. The page looks slightly untidy, and a checker will not find the alignment evidence.
The correction is to turn on snapping or enter exact positions in the format panel. Zoom in on the edges to check. For several objects, use the align tools to align left edges and distribute space evenly, instead of nudging each one.
Check yourself
1. A page is 210 mm wide with 25 mm margins each side. Two columns have a 10 mm gutter. How wide is each column?
Show answer
Usable width = 210 − 50 = 160. Columns = (160 − 10) ÷ 2 = 75 mm each.
2. Using the 4-column grid above (38 mm columns, 6 mm gutters), how wide is an image spanning 3 columns?
Show answer
3 × 38 + 2 × 6 = 114 + 12 = 126 mm.
3. Why align several objects using the align tool rather than dragging?
Show answer
It uses exact positions, so edges match precisely and spacing is equal. Dragging by eye leaves small differences.
Where this leads next
The last lesson asks you to justify a choice in Explain an image-format choice. Review the module guide for the route, and use the practical task and evidence checker before you submit a file.
Students often follow each step in a lesson but lose marks when the same skill sits inside a longer practical task. Our teachers look for exactly that pattern in online one-to-one ICT tuition.