CSS Grid System

Lesson 9 • Intermediate Track

💡 Grid vs Flexbox: When to Use Each

Think of Grid like a spreadsheet: You define rows AND columns, then place items in specific cells. Flexbox is like a single row or column; Grid is the whole table!

Feature	Flexbox	Grid
Dimensions	One (row OR column)	Two (rows AND columns)
Best for	Navbars, buttons, small components	Page layouts, galleries, dashboards
Item sizing	Content-based	Track-based (columns/rows)
Overlap items?	No	Yes (with grid-area)

Quick rule: Use Flexbox for components, Grid for page structure. You can (and should!) combine both!

What is CSS Grid?

CSS Grid is a powerful two-dimensional layout system that allows you to create complex layouts with rows and columns. It's perfect for page layouts, galleries, and structured content.

Grid Basics

See how display: grid creates a two-dimensional layout

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Basics</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      background: #1e293b;
      padding: 20px;
      border-radius: 12px;
    }
    
    .grid-item {
      background: #3b82f6;
      padding: 30px;
      text-align: center;
      borde
...

grid-template-columns

Define your column structure with flexible options.

Column Configurations

Different ways to define grid columns

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Grid Columns</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .section {
      margin: 25px 0;
    }
    
    h3 {
      color: #22c55e;
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .grid {
      display: grid;
      gap: 10px;
      background: #1e293b;
      padding: 15px;
      border-radius: 8px;
    }
    
    .item {
      bac
...

Spanning Rows and Columns

Make items span multiple columns or rows for complex layouts.

Grid Spanning

Items that take up multiple cells

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Grid Spanning</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background: #1e293b;
      padding: 20px;
      border-radius: 12px;
    }
    
    .item {
      background: #3b82f6;
      padding: 15px;
      bord
...

Grid Areas (Named Layouts)

Create intuitive layouts by naming areas - perfect for page structure!

Grid Template Areas

Name your layout regions

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Grid Areas</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      color: #e5e7eb;
    }
    
    .page-layout {
      display: grid;
      grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
      grid-template-columns: 200px 1fr 1fr;
      grid-template-rows: 60px 1f
...

Responsive Grid with auto-fit

Create responsive grids without media queries!

Auto-Fit Responsive Grid

Cards that automatically reflow based on space

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Grid</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    h1 { margin-bottom: 20px; }
    
    /* THE MAGIC: auto-fit + minmax */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .card {
      background: #1e293b;
      border-radius: 12px;
      overflow: hi
...

Practice: Photo Gallery

Create a photo gallery grid with:

Responsive columns using auto-fit
One featured image that spans 2 columns
Consistent gap between items

Photo Gallery

Build a complete responsive gallery

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Photo Gallery</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 20px;
      color: #e5e7eb;
    }
    
    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #3b82f6;
    }
    
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15
...

🎉 Lesson Complete

You now understand CSS Grid — the most powerful layout system in CSS. Key takeaways:

✅ display: grid creates a two-dimensional layout
✅ grid-template-columns defines column structure
✅ fr units create flexible, fractional columns
✅ grid-column: span 2 makes items span multiple cells
✅ grid-template-areas creates readable named layouts
✅ auto-fit + minmax() creates responsive grids without media queries

CSS Grid System

💡 Grid vs Flexbox: When to Use Each

What is CSS Grid?

Grid Basics

grid-template-columns

Column Configurations

Spanning Rows and Columns

Grid Spanning

Grid Areas (Named Layouts)

Grid Template Areas

Responsive Grid with auto-fit

Auto-Fit Responsive Grid

Practice: Photo Gallery

Photo Gallery

🎉 Lesson Complete

Cookie & Privacy Settings