CSS Grid Layout

Master 2D Layout System for Complex Designs

🎛️ Interactive Grid Playground

Experiment with CSS Grid properties and see their effects in real-time:

Container Properties:

15px

Selected Item Properties:

Click on a grid item to select and modify it

1
2
3
4
5
6
7
8
9

Generated CSS:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 15px;
justify-items: stretch;
align-items: stretch;
}
.selected-item {
grid-column: auto;
grid-row: auto;
justify-self: auto;
align-self: auto;
}

📐 Grid Template Areas

Learn to create complex layouts using named grid areas:

Header
Main Content
Footer
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  grid-template-columns: 200px 1fr 250px;
  gap: 1rem;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
Header
Main
Footer
.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 150px 1fr 150px;
  min-height: 100vh;
}
Dashboard Header
Stats
Chart
Data Table
Notifications
.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar stats chart"
    "sidebar table notifications";
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: 80px 200px 1fr;
}
Hero Article
Article 1
Article 2
Article 3
Ads
.magazine {
  display: grid;
  grid-template-areas:
    "hero hero article1"
    "hero hero article2"
    "article3 article3 ads";
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 200px;
}

⚖️ Grid vs Flexbox Comparison

Understand when to use Grid vs Flexbox for different layout scenarios:

CSS Grid (2D Layout)

1
2 (spans 2 columns)
3
4
5 (spans 2 rows)
6

✅ Controls both rows and columns simultaneously

Flexbox (1D Layout)

1
2 (flexible)
3
4
5
6

✅ Controls either row OR column direction

Grid: Layout First

Content adapts to predefined grid
Fixed structure
Position controlled by grid

🏗️ Define the layout structure first, then place content

Flexbox: Content First

Short
Medium length content
Very long content that determines the layout behavior and spacing

📄 Content size determines the layout behavior

Grid Alignment

justify-self: start
justify-self: center
justify-self: end

🎯 Individual item alignment within grid cells

Flex Alignment

align-self: flex-start
align-self: center
align-self: flex-end

↔️ Alignment along flex axis

🎯 Use CSS Grid When:

  • Creating complex 2D layouts
  • Building page-level layouts
  • You need precise positioning
  • Overlapping elements are needed
  • Layout structure is predetermined
  • Working with grid-like designs

🔄 Use Flexbox When:

  • Creating 1D layouts (rows or columns)
  • Building component-level layouts
  • Content size should affect layout
  • You need flexible item sizing
  • Centering content easily
  • Navigation bars, card layouts

🤝 Combine Both When:

  • Grid for overall page structure
  • Flexbox for components within grid areas
  • Complex responsive designs
  • Modern web applications
  • Best of both worlds approach
  • Maximum layout flexibility

💪 Grid Layout Challenge

Test your CSS Grid skills by creating responsive layouts:

📸 Create a Responsive Photo Gallery

Build a photo gallery that adapts to different screen sizes using CSS Grid auto-fit and minmax.

Target Result:
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Your CSS:
.photo-gallery { display: grid; /* Add your grid properties here */ gap: 1rem; } .photo-item { background: #ddd; aspect-ratio: 1; /* Add styling as needed */ }
Your Result:
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6

📚 CSS Grid Quick Reference

Container Properties

  • display: grid - Creates grid container
  • grid-template-columns - Define column tracks
  • grid-template-rows - Define row tracks
  • grid-template-areas - Named grid areas
  • gap - Space between tracks
  • justify-items - Horizontal item alignment
  • align-items - Vertical item alignment

Item Properties

  • grid-column - Column placement
  • grid-row - Row placement
  • grid-area - Area placement or shorthand
  • justify-self - Individual horizontal alignment
  • align-self - Individual vertical alignment

Units & Functions

  • fr - Fraction of available space
  • repeat() - Repeat track patterns
  • minmax() - Size range for tracks
  • auto-fit - Fit tracks to container
  • auto-fill - Fill container with tracks
  • min-content - Minimum content size
  • max-content - Maximum content size

Common Patterns

  • repeat(auto-fit, minmax(250px, 1fr)) - Responsive columns
  • 1fr 1fr 1fr - Equal columns
  • grid-column: 1 / -1 - Full width
  • place-items: center - Center everything
  • grid: repeat(3, 1fr) / repeat(3, 1fr) - 3x3 grid shorthand