🔲 CSS Grid

CSS Grid is a powerful 2-dimensional layout system for creating complex, responsive layouts with rows and columns.

🎮 Learn by Playing

Check out Grid Garden - a fun game that teaches CSS Grid concepts interactively!

Grid vs Flexbox

Feature	Flexbox	Grid
Dimensions	1D (row OR column)	2D (rows AND columns)
Best for	Components, navigation	Page layouts, galleries
Item control	Content-based sizing	Grid-based positioning

Basic Grid Setup

HTML

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columns */
  grid-template-rows: 100px 100px;    /* 2 rows */
  gap: 10px;                      /* Space between items */
}

Live Example: 3 Columns × 2 Rows

Defining Columns and Rows

Fixed Sizes

.grid {
  /* 3 columns: 200px, 300px, 200px */
  grid-template-columns: 200px 300px 200px;

  /* 2 rows: 100px each */
  grid-template-rows: 100px 100px;
}

Flexible Sizes (fr unit)

.grid {
  /* 3 equal columns using fraction (fr) */
  grid-template-columns: 1fr 1fr 1fr;

  /* First column 2x wider than others */
  grid-template-columns: 2fr 1fr 1fr;

  /* Mix fixed and flexible */
  grid-template-columns: 200px 1fr 200px;
}

repeat() Function

.grid {
  /* Instead of: 1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);

  /* Pattern repetition */
  grid-template-columns: repeat(3, 100px 200px);
  /* Results in: 100px 200px 100px 200px 100px 200px */
}

auto-fit and auto-fill

.grid {
  /* Automatically fits as many 200px columns as possible */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* Perfect for responsive card grids! */
}

Gap (Spacing)

.grid {
  /* Same gap for rows and columns */
  gap: 20px;

  /* Different row and column gaps */
  row-gap: 20px;
  column-gap: 10px;

  /* Shorthand: row-gap column-gap */
  gap: 20px 10px;
}

Placing Items

Grid Lines

Grid Lines (Numbered)

   1      2      3      4
   │      │      │      │
1──┼──────┼──────┼──────┼
   │      │      │      │
2──┼──────┼──────┼──────┼
   │      │      │      │
3──┼──────┼──────┼──────┼

/* Item spans from line 1 to 3 (2 columns) */
.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* Shorthand */
.item {
  grid-column: 1 / 3; /* start / end */
}

/* Span keyword */
.item {
  grid-column: span 2; /* Spans 2 columns */
  grid-row: span 2;    /* Spans 2 rows */
}

Item Spanning Multiple Columns

Spans 2 columns

Template Areas

Name areas of your grid for easier layout control:

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Alignment

Justify (Horizontal)

.grid {
  /* Align items within their grid cell */
  justify-items: start;   /* start, end, center, stretch */

  /* Align entire grid within container */
  justify-content: center; /* start, end, center, space-between, etc. */
}

/* Override for individual item */
.item {
  justify-self: end;
}

Align (Vertical)

.grid {
  /* Align items within their grid cell */
  align-items: center;    /* start, end, center, stretch */

  /* Align entire grid within container */
  align-content: center;  /* start, end, center, space-between, etc. */
}

/* Override for individual item */
.item {
  align-self: start;
}

Common Patterns

Responsive Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  /* Automatically adjusts columns based on available space! */
}

Holy Grail Layout

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

.header {
  grid-column: 1 / 4; /* Spans all 3 columns */
}

.footer {
  grid-column: 1 / 4; /* Spans all 3 columns */
}

Centered Content

.centered {
  display: grid;
  place-items: center; /* Shorthand for justify-items + align-items */
  min-height: 100vh;
}

Grid vs Flexbox: When to Use What

💡 Choosing Between Grid and Flexbox

Use Grid when:

You need 2D layout (rows AND columns)
Creating page-level layouts
You know the structure in advance
Items need to align in both directions

Use Flexbox when:

You need 1D layout (row OR column)
Creating component-level layouts
Content determines the layout
Items need flexible sizing

Often use both! Grid for overall layout, Flexbox for components.

Browser Support

✅ Excellent Browser Support

CSS Grid is supported in all modern browsers. For older browsers (IE 11), use Flexbox as a fallback or consider using a CSS Grid polyfill.

Summary

📚 What you learned

Grid is a 2D layout system (rows and columns)
Use display: grid on container
Define columns with grid-template-columns
Define rows with grid-template-rows
fr unit creates flexible columns/rows
repeat() simplifies repetitive definitions
gap adds space between items
Items can span multiple columns/rows
Template areas provide semantic layouts