Layout Patterns

Common layout patterns and grid systems for responsive page design.

Grid Layouts

Two Column (2fr 1fr)

Responsive: Stacks to single column on tablets and mobile
Main Content (2fr)
Sidebar (1fr)

Three Column (1fr 1fr 1fr)

Responsive: 2 columns on tablets, 1 column on mobile
Column 1
Column 2
Column 3

Four Column (1fr 1fr 1fr 1fr)

Responsive: 2 columns on tablets, 1 column on mobile
1
2
3
4

Auto-fit Grid (Responsive)

Automatically fills columns - adapts to screen size
Item
Item
Item
Item
Item
Item
/* Two column layout */ <div style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg);"> <div>Main content</div> <div>Sidebar</div> </div> /* Three column layout */ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);"> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div> /* Auto-responsive grid */ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg);"> <!-- Items automatically flow --> </div>

Flexbox Layouts

Horizontal Row

Items arranged left to right, wraps on small screens
Item 1
Item 2
Item 3
Item 4

Vertical Column

Items stacked vertically
Item 1
Item 2
Item 3

Space-Between (Header/Footer)

First item left, last item right, space between
Logo
User Menu

Centered Layout

Items centered both horizontally and vertically
Centered Content
/* Horizontal row with wrapping */ <div style="display: flex; gap: var(--spacing-lg); flex-wrap: wrap;"> <div style="flex: 1; min-width: 150px;">Item</div> <div style="flex: 1; min-width: 150px;">Item</div> </div> /* Vertical column */ <div style="display: flex; flex-direction: column; gap: var(--spacing-lg);"> <div>Item 1</div> <div>Item 2</div> </div> /* Space between (header) */ <div style="display: flex; justify-content: space-between; align-items: center;"> <div>Logo</div> <div>Nav</div> </div> /* Centered */ <div style="display: flex; justify-content: center; align-items: center;"> <div>Centered</div> </div>

Hero Sections

Hero Section Example

Large, attention-grabbing section at the top of a page

Large Hero

With more height and breathing room for important messaging

<section style="background: var(--gradient-accent); color: white; padding: var(--spacing-2xl); text-align: center;"> <h2>Hero Section</h2> <p>Tagline or description</p> <button class="btn">Call to Action</button> </section>

Feature Grid

Auto-responsive grid for feature cards or service listings

Feature One

Description of the feature and its benefits.

Feature Two

Description of the feature and its benefits.

Feature Three

Description of the feature and its benefits.

Feature Four

Description of the feature and its benefits.

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg);"> <div class="card"> <i>Icon</i> <h4>Feature</h4> <p>Description</p> </div> <!-- More cards --> </div>

Responsive Design Tips

Mobile First

Design for mobile first, then add complexity for larger screens.

Breakpoints

Use media queries at 768px (mobile/tablet) and 1024px (tablet/desktop).

Flexible Grid

Use grid-template-columns: repeat(auto-fit, minmax(...)) for automatic wrapping.

Flexbox Wrap

Enable flex-wrap for items to wrap to next line on small screens.