Module 10: Grids & Systems — Design & Code Foundations

01

Grid Anatomy

The parts of a grid system and how they work together.

Classic 12-column grid

Grid Columns

Columns divide horizontal space into equal units. 12 columns is common because 12 divides evenly by 2, 3, 4, and 6 - enabling many layout combinations.

Key point: 12-column grid: flexible and versatile

Gutters = space between columns

Gutter Spacing

Gutters create breathing room between columns. Consistent gutter width (16px, 24px, 32px) establishes visual rhythm across the layout.

Key point: Consistent gutters = consistent rhythm

Margins = space outside the grid

Grid Margins

Margins are the space between the grid and viewport edges. They prevent content from touching screen edges and provide visual breathing room.

Key point: Margins protect content from edges

Header Row

Content Row

Footer Row

Grid Rows

Rows organize vertical space. Unlike columns, row heights are often content-driven rather than fixed. CSS Grid handles both dimensions.

Key point: Rows can be fixed or content-driven

02

CSS Grid

Native browser grid - powerful, flexible, and widely supported.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}

Grid Fundamentals

display: grid creates a grid container. grid-template-columns defines column structure. fr units distribute available space proportionally.

Key point: fr = fractional unit, like flex-grow for grid

grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
Creates as many 250px+ columns as fit

Responsive Without Media Queries

auto-fill with minmax() creates responsive grids without media queries. Columns automatically adjust based on available space.

Key point: This one line handles most card grids

grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
.header { grid-area: header; }

Grid Template Areas

Named grid areas create visual, readable layouts. You can see the layout structure in your CSS. Great for page-level layouts.

Key point: Grid areas = visual layout in code

Red spans 2 columns

Spanning Rows & Columns

grid-column: span 2 makes an item span multiple columns. Same for rows. This creates asymmetric, magazine-style layouts.

Key point: Spanning breaks the uniform grid

03

Flexbox

One-dimensional layout for rows or columns.

.container {
display: flex;
gap: 16px;
justify-content: space-between;
}

Flexbox Fundamentals

Flexbox arranges items in a row (default) or column. justify-content controls main axis spacing. align-items controls cross axis alignment.

Key point: Flex for 1D, Grid for 2D

Fixed

Grows

flex: 1 makes item grow to fill space

Flex Grow & Shrink

flex: 1 makes an item grow to fill available space. flex: 0 0 100px creates a fixed-width item. Combine for sidebar + main content layouts.

Key point: flex: 1 = grow, flex: 0 0 Xpx = fixed

Item

flex-wrap: wrap allows items to flow to new rows

Flex Wrap

flex-wrap: wrap allows items to flow to new lines when they don't fit. Without it, items shrink or overflow.

Key point: Wrap creates responsive flow layouts

USE FLEXBOX:

Navigation bars

Card content

Centering

Unknown item count

USE GRID:

Page layouts

Card grids

Two-dimensional

Alignment across rows

Flexbox vs Grid

Flexbox is content-driven - items flow based on their size. Grid is container-driven - you define structure, items fit into it.

Key point: Both are essential. Learn both.

04

Column Systems

Traditional grid systems and how to implement them.

The 12-Column Grid

12 columns enable halves, thirds, quarters, and sixths. The most flexible column count for varied layouts.

Key point: 12 = divisible by 2, 3, 4, 6

.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gutter, 24px);
}
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

Building a Column System

Create utility classes for common column spans. Or use inline styles for one-off layouts. CSS Grid makes this trivial.

Key point: CSS Grid replaces Bootstrap's grid

.col-sm-12 { grid-column: span 12; }
@media (min-width: 768px) {
.col-md-6 { grid-column: span 6; }
}
@media (min-width: 1024px) {
.col-lg-4 { grid-column: span 4; }
}

Responsive Columns

Responsive utility classes (Bootstrap-style) let items span different columns at different breakpoints. Full-width on mobile, grid on desktop.

Key point: Consider if you need this complexity

8 columns: Simpler, still flexible

16 columns: More precision for dense layouts

Content-based: Let content determine columns

Asymmetric: Custom ratios (3:5:2)

Beyond 12 Columns

12 columns is a convention, not a rule. Some designs work better with 8, 16, or no predefined columns at all.

Key point: Choose columns based on content needs

05

Modular Design

Design systems of components, not individual pages.

Card component

Grid-Aware Components

Design components that work within your grid. Cards that are 1, 2, or 3 columns wide. Headers that span full width. Sidebars that are fixed widths.

Key point: Components + grid = infinite layouts

--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;

Consistent Spacing Scale

A spacing scale ensures consistent rhythm. Use these values for margins, padding, and gaps. Constraining choices creates cohesion.

Key point: Constraints create consistency

Text aligned to baseline grid

Creates vertical rhythm

Vertical Rhythm

A baseline grid aligns text and elements to a consistent vertical rhythm. Typically 4px, 8px, or based on line-height. Creates harmony.

Key point: Baseline grid = advanced but powerful

.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}

Component-Level Responsiveness

Container queries let components respond to their container's size, not the viewport. A card can adapt whether it's in a sidebar or main content.

Key point: Container queries = truly modular components

10

The Science of Visual Structure

Why grids work - the psychology behind structured layouts.

Proximity groups first two, similarity groups by color

Gestalt Principles

Gestalt principles explain how we perceive groups. Grids leverage proximity (close = related) and alignment (aligned = related) to create order.

Key point: Grids are Gestalt principles in action

Chaotic Layout

Where do I look?

What's important?

High cognitive load

Grid Layout

Clear hierarchy

Predictable structure

Low cognitive load

Reducing Mental Effort

Grids reduce cognitive load by creating predictable patterns. Users learn where to find information. Consistency enables focus on content.

Key point: Structure frees attention for content

F-pattern: top row, then left side

Eye Tracking Patterns

Users scan in F-patterns (for text-heavy) or Z-patterns (for visual pages). Grids can guide scanning by placing key content along these paths.

Key point: Place important content where eyes go

Golden ratio: 1.618:1 (≈ 62%:38%)

Natural Proportions

The golden ratio (1.618:1) appears in nature and is considered aesthetically pleasing. Useful for main:sidebar proportions. But don't obsess - close enough works.

Key point: Golden ratio is a guide, not a rule

11

Grid Systems in Practice

How major sites implement grid layouts.

The New York Times

Principles Identified:

Asymmetric grids Main story spans wide, secondary stories fit around it

Dense information Tight grid enables high content density without chaos

Clear hierarchy Story importance visible through size and placement

Key insight: News sites demonstrate grids at their most complex - managing many items with clear hierarchy.

Stripe

Principles Identified:

Generous margins Lots of whitespace within a clear grid structure

Consistent rhythm Spacing scale applied consistently throughout

Modular sections Each section is a self-contained grid composition

Key insight: Stripe shows how grids can create both structure and spaciousness.

Principles Identified:

Masonry grid Varying heights create visual interest while maintaining column alignment

Auto-fill columns Number of columns adjusts to screen width

Consistent gutters Same spacing throughout despite varying item sizes

Key insight: Pinterest shows grids can be dynamic and irregular while maintaining structure.

14

CSS Implementation

Grid patterns you can use today.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Page Layout via CSS

grid-template-areas - Visual layout definition
grid-template-columns - Fixed sidebar, fluid main
min-height: 100vh - Full viewport minimum

Tip: Change areas in media queries for responsive layout shifts.

.card-grid {
  display: grid;
  grid-template-columns: 
    repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 3vw, 32px);
}

/* No media queries needed! */

Auto-Responsive Cards via CSS

auto-fill - As many columns as fit
minmax() - Min 280px, max 1fr
min() - Prevents overflow on small screens

Tip: This handles 90% of card grid needs with zero media queries.

.holy-grail {
  display: grid;
  grid-template-columns: 
    minmax(150px, 1fr) 
    minmax(300px, 3fr) 
    minmax(150px, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .holy-grail {
    grid-template-columns: 1fr;
  }
}

Holy Grail Layout via CSS

minmax() - Flexible columns with constraints
Proportional fr - Middle column 3x wider
Mobile override - Single column on small screens

Tip: The 'holy grail' was hard before Grid. Now it's trivial.

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* title, body, footer */
}

/* Now all card titles align, all footers align */

Subgrid via CSS

subgrid - Inherits parent grid lines
grid-row: span 3 - Card spans 3 parent rows
Alignment - Child elements align across cards

Tip: Subgrid is perfect for aligning card contents across a grid.

15

Self-Assessment

Test your grid knowledge.

Q1

When should you use CSS Grid vs Flexbox?

Click to reveal

Q2

What does grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) do?

Click to reveal

Q3

Why is 12 a common column count?

Click to reveal

Q4

What's the purpose of gutters in a grid?

Click to reveal

Q5

How do container queries differ from media queries?

Click to reveal

Grids & Systems

Core Concepts

Grid Anatomy

CSS Grid

Flexbox

Column Systems

Modular Design

Science & Psychology

The Science of Visual Structure

Real-World Examples

Grid Systems in Practice

CSS Implementation

CSS Implementation

Self-Assessment

Self-Assessment

Key Takeaways