UI/UX Design Layout and Spacing
Every well-organized screen you have ever seen is built on a grid. Grids are invisible structures that tell elements where to sit, how wide to be, and how much space to leave around them. Without a grid, even a screen with excellent individual elements looks accidental and chaotic. With a grid, even simple designs feel deliberate, professional, and easy to scan.
What Is a Grid
A grid is a set of invisible vertical and horizontal lines that divide a layout into structured zones. Designers align elements — images, text, buttons, cards — to these lines. The result is a screen where everything feels intentionally placed, not randomly scattered.
GRID ANATOMY DIAGRAM
|----|----|----|----|----|----|----|----|
| | | | | | | | | <-- COLUMNS (8 shown here)
| C1 | G | C2 | G | C3 | G | C4 | G | C = Column, G = Gutter
| | | | | | | | |
|----|----|----|----|----|----|----|----|
| MARGIN | | MARGIN |
<-- CONTENT AREA ------->
TERMS:
Column: A vertical content zone where elements live
Gutter: The space between columns (content never goes here)
Margin: The space between the edge of the screen and the content area
Types of Grids Used in UI Design
Column Grids
Column grids divide the layout into equal-width vertical columns with gutters between them. They are the most common grid type in digital design. The number of columns varies by screen size:
- Mobile (phone): 4 columns, 16px gutters, 16px margins
- Tablet: 8 columns, 24px gutters, 32px margins
- Desktop: 12 columns, 24-32px gutters, 64-80px margins
COLUMN GRID BY SCREEN SIZE DIAGRAM MOBILE (4 columns): [M][COL1][G][COL2][G][COL3][G][COL4][M] M=Margin, G=Gutter TABLET (8 columns): [M][C1][G][C2][G][C3][G][C4][G][C5][G][C6][G][C7][G][C8][M] DESKTOP (12 columns): Most design tools use 12 columns because 12 divides easily into: Halves: 2 × 6 columns Thirds: 3 × 4 columns Quarters: 4 × 3 columns This flexibility makes 12 columns the most common choice.
Baseline Grids
A baseline grid is a series of horizontal lines spaced at equal intervals — often 8px or 4px — that ensure all text elements align to the same vertical rhythm. When every text block, icon, and element snaps to the same baseline grid, the layout feels harmonious in a way that is hard to define but immediately felt.
Modular Grids
A modular grid combines column and row divisions to create a matrix of cells. These work well for image-heavy layouts like photo galleries, product grids, and card-based dashboards.
The 8-Point Grid System
The 8-point grid system is a specific approach where all spacing, sizing, and positioning uses multiples of 8. Padding, margins, heights, and gaps are set to 8, 16, 24, 32, 40, 48, 64, 80, 96px — never 7px, 9px, or 15px.
Why multiples of 8:
- Most screen sizes are divisible by 8, so elements fit cleanly on pixels
- 8 divides into 4 and 2, making it easy to create half and quarter sizes
- A consistent spacing scale creates visual rhythm automatically
- Developers find it easier to implement consistent designs when all values follow a clear rule
8-POINT GRID SPACING SCALE DIAGRAM Token Name Value Typical Use ---------- ----- ----------- space-1 4px Icon internal padding, tiny gaps space-2 8px Between label and icon, tight element padding space-3 16px Card internal padding, form field padding space-4 24px Space between cards, section internal padding space-5 32px Space between sections within a page space-6 48px Space between major page sections space-7 64px Hero section top/bottom padding space-8 80px Large page section separation RULE: Never use odd pixel values (7px, 13px, 19px) unless there is a specific technical reason. They create inconsistency and are harder for developers to maintain.
Spacing and Proximity: Making Relationships Clear
Spacing communicates relationship. Elements close together are perceived as related. Elements far apart are perceived as separate. Designers control these relationships deliberately through spacing.
SPACING RELATIONSHIP DIAGRAM TIGHT SPACING (8px): [ Label ] [ Input field ] -- Label and field read as one unit MEDIUM SPACING (24px): [ First form field ] [ Second form field ] -- Fields are in the same form but clearly separate LARGE SPACING (48px): [ Personal Information Section ] [ Payment Information Section ] -- Clearly different sections of the form RULE: The space between items should be: Smaller than the space between groups Larger within groups than between the group and unrelated content
Visual Hierarchy Through Layout
Layout controls what users see first, second, and third. A strong layout guides the user's eye through the screen in a deliberate order, ensuring they encounter the most important information first.
The F and Z Patterns in Layout
As covered in Topic 3, users scan screens in F and Z patterns. Layout decisions should align with these natural reading patterns:
- Place the primary headline at the top left (both F and Z patterns start here)
- Place the most important action button where the eye naturally moves next
- Put supporting information below the main message
- Place the least critical content at the bottom
Visual Weight and Layout Balance
Every element has visual weight — how much it draws the eye. Large elements have high weight. Bright, saturated colors have high weight. Bold text has higher weight than regular text. Images have high weight compared to white space.
A balanced layout distributes visual weight so no area of the screen becomes overwhelming and no area feels neglected.
VISUAL WEIGHT COMPARISON DIAGRAM
HIGH VISUAL WEIGHT: LOW VISUAL WEIGHT:
Large image Empty white space
Bold text Light grey text
Bright color Muted color
Complex element Simple line
Primary button Text link
BALANCE EXAMPLE:
LEFT SIDE: RIGHT SIDE:
[ Large Product Image ] [ Product Name -- Bold ]
High weight [ Price -- Medium weight ]
[ Short description ]
[ ADD TO CART button ]
Image on left balances multiple elements on right.
This creates a balanced, magazine-style layout.
Card Layouts: The Most Common UI Pattern
Cards are rectangular containers that group related information. They are one of the most common layout patterns in modern UI design — used in every social feed, product listing, dashboard, and search results page.
CARD ANATOMY DIAGRAM ┌─────────────────────────────┐ │ [ Card Image / Media ] │ <-- Optional visual │─────────────────────────────│ │ [ Card Headline ] │ <-- Primary info (H3 or H4) │ [ Supporting text here ] │ <-- Secondary info │ [ Tag ] [ Tag ] │ <-- Metadata │ [ Action Button ] │ <-- Call to action └─────────────────────────────┘ CARD SPACING RULES: Internal padding: 16px minimum, 24px preferred Corner radius: 8-16px for friendly, 0-4px for formal/professional Card gap (between cards): 16px minimum Shadow: subtle (2-4px blur, 0.1 opacity) to create depth
Whitespace: The Silence That Makes Music Work
Whitespace (also called negative space or breathing room) is the empty space around and between elements. Beginning designers often feel compelled to fill every pixel with content. This is a mistake. Whitespace serves multiple essential functions:
- Improves readability: Text surrounded by space is easier to read than text packed between other elements
- Indicates quality: Generous whitespace signals premium, high-quality products (Apple's website is a masterclass in this)
- Guides focus: Surrounded by space, an element feels important and isolated from noise
- Reduces cognitive load: A less cluttered screen requires less mental effort to parse
WHITESPACE COMPARISON DIAGRAM LOW WHITESPACE VERSION: ┌──────────────────────────────────┐ │Heading│Subheading│Tag1│Tag2│Btn │ │Line1 of text about the product. │ │Line2 of text. Icon1 Icon2 Icon3 │ └──────────────────────────────────┘ Feels: Crowded, overwhelming, low quality HIGH WHITESPACE VERSION: ┌──────────────────────────────────┐ │ │ │ Heading │ │ │ │ Subheading │ │ │ │ Line1 of text about the product │ │ with space to breathe properly. │ │ │ │ [ Button ] │ │ │ └──────────────────────────────────┘ Feels: Premium, calm, easy to read
Responsive Layout: How Grids Adapt to Different Screens
Responsive design means a layout that adapts to different screen widths. The grid system plays a central role in this adaptation. Columns collapse, stack, or reorder as screen width decreases.
RESPONSIVE LAYOUT GRID DIAGRAM DESKTOP (1440px wide, 12 columns): ┌────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┐ │ C1 │ C2 │ C3 │ C4 │ C5 │ C6 │ C7 │ C8 │ C9 │C10 │C11 │C12 │ │ SIDEBAR (3 cols) │ MAIN CONTENT (9 cols) │ └────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┘ TABLET (768px wide, 8 columns): ┌────┬────┬────┬────┬────┬────┬────┬────┐ │ C1 │ C2 │ C3 │ C4 │ C5 │ C6 │ C7 │ C8 │ │ SIDEBAR (full row -- stacked above) │ │ MAIN CONTENT (full row) │ └────┴────┴────┴────┴────┴────┴────┴────┘ MOBILE (390px wide, 4 columns): ┌────┬────┬────┬────┐ │ C1 │ C2 │ C3 │ C4 │ │ SIDEBAR (hidden)│ │ MAIN CONTENT │ │ (full 4 cols) │ └────┴────┴────┴────┘
Layout Anti-Patterns to Avoid
Centering Everything
Many beginners center-align all text on every screen. This works for short headings and simple one-page layouts. For body text of more than two lines, center alignment forces the eye to find a new starting point on every line, slowing reading dramatically. Left-align body text.
Inconsistent Spacing
Using random spacing values (14px here, 19px there, 22px somewhere else) creates a layout that looks inconsistent even when users cannot identify why. Stick to the 8-point grid scale.
Ignoring the Grid on Individual Screens
Designing one screen on a grid but ignoring the grid for the next creates a jarring inconsistency. Apply the grid to every screen in the product — not just the home screen.
Overcrowding Mobile Screens
Trying to fit desktop content into a mobile layout creates an overwhelming screen. Mobile design requires ruthless content prioritization — show only what is essential. Progressive disclosure (revealing more when the user asks for it) helps manage this.
Key Points
- Grids are invisible structures of columns, gutters, and margins that organize layouts into consistent, professional designs
- Mobile uses 4 columns, tablet 8, desktop 12 — the 12-column grid is most common because it divides evenly into halves, thirds, and quarters
- The 8-point grid system sets all spacing values to multiples of 8 for consistency and clean pixel rendering
- Tight spacing indicates relationship; large spacing indicates separation
- Cards group related information inside a consistent container — use 16-24px internal padding and consistent gap spacing
- Whitespace signals quality, improves readability, reduces cognitive load, and guides focus
- Never center-align body text; left alignment creates a consistent eye anchor for reading
- Responsive grids collapse from 12 columns on desktop to 4 columns on mobile — content reorders and stacks as width decreases