Free Lessons

Learn CSS Grid step by step

Guided lessons, hands-on examples and real layout challenges. Choose your language and follow a structured path.

Choose your learning path Try Grid Detective

Pure CSS

Tailwind

JavaScript

SCSS

No experience needed No signup Free forever

Step 1

Choose your coding path

All four paths teach the same CSS Grid concepts, using different ways of writing the code, known as syntax. Start with Pure CSS if you are new.

Start here. No framework needed.

Pure CSS

CSS Path

The recommended starting point. No framework needed.

9 lessons • Beginner friendly
Start CSS path →

Tailwind

Tailwind Path

Learn CSS Grid using Tailwind CSS classes.

9 lessons • Some CSS needed
Start Tailwind path →

JavaScript

JavaScript Path

Learn how to create and control grid layouts with JavaScript.

9 lessons • JS basics needed
Start JS path →

SCSS

SCSS Path

Grid with Sass mixins and variables.

9 lessons • CSS confidence needed
Start SCSS path →

Curriculum

From zero to confident with CSS Grid

Each lesson builds on the last. You will understand what each property does, not just copy code.

How display: grid works and when to use it
Columns and rows with grid-template
Using the fr unit to create flexible columns and rows
Grid gaps, alignment and justification
Placing and spanning items across cells
Organising larger layouts with named grid areas
Auto-fill and auto-fit for responsive grids
Build real layouts such as webpages, dashboards and card grids
Fixing mistakes with Grid Detective challenges

9 Lessons

What is CSS Grid?

Columns and Rows

The fr Unit: Flexible Column Sizing

Grid Gaps

Alignment and Justification

Spanning Items

Named Grid Areas

Auto-fill and Auto-fit

Grid Detective Challenge