Use guides and space around the edges to arrange a clear page.
What you will learn.
Compare two grids with the same content, refine one, and explain how its columns, gaps, and margins help reading.
Before you begin.
Start with Design fundamentals: Add a palette to a mobile screen and your C27 Academy file in Figma Design. The source material and any extra tool are named in Practice.
Learn the concept.
Grids and alignment
Words to know.
Grid
A set of lines or areas that helps you arrange a page.
Each red block stands for a content area, such as a photo or text. Compare the big and small blocks. A different arrangement changes what you notice first.
Slide 5.
Read the blocks before the details
Guide
A line in your design tool that helps you line items up.
Instructions for using the work
Margin
The space between important content and the page edge.
Space outside a part
Span
To stretch across more than one column or block.
Width across columns
The idea in practice
See a worked example.
Name what each block will contain before choosing small details.
For exampleLabel blocks “photo,” “headline,” and “details” before styling them.
Check the same content in both options so the layout is what changes.
For exampleUse the same words and image in both grid sketches.
Use the brochure assignment to practice across several connected panels.
For exampleTry the selected grid across all panels of the brochure.
Worked grid. Start with the same heading, image, and paragraph. In A, align the heading and paragraph to one left column. In B, give the image a second column with a consistent gap. Choose one and refine its spacing. Check whether the heading and paragraph still share an edge and whether the eye reaches them in the intended order.
