📚 Lesson 4: Common Layout Patterns

Real-World Grid Patterns

Instead of starting from scratch every time, you can use these proven patterns. Each pattern solves a specific layout problem you'll encounter in real projects.

1. Two-Column Layout (Sidebar + Content)

The most common layout on the web: fixed sidebar, flexible content.

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

Perfect for: Blogs, documentation, admin panels

2. Holy Grail Layout

Classic three-column layout with header and footer.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header, .footer {
  grid-column: 1 / -1;
}

Perfect for: Traditional websites, content management

3. Card Grid

Responsive cards that adjust automatically.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Perfect for: Product listings, image galleries, blog posts

4. Dashboard Layout

Multi-panel interface for admin panels.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr;
  gap: 16px;
}

.nav { grid-row: 1 / 3; }
.header { grid-column: 2 / 4; }

Perfect for: Admin dashboards, analytics panels

5. Magazine Layout

Asymmetric layout for editorial content.

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.featured { grid-column: span 4; grid-row: span 2; }
.sidebar { grid-column: span 2; }

Perfect for: News sites, blogs, portfolios

Choosing the Right Pattern

• Two-Column: When you need a sidebar (navigation, filters, or supplementary content)
• Holy Grail: When you need dual sidebars (navigation + ads/widgets)
• Card Grid: When displaying multiple similar items
• Dashboard: When showing multiple data panels
• Magazine: When you need visual hierarchy and featured content