CSS

Learn CSS Grid the pure CSS way

No frameworks and no build tools, just the core CSS Grid properties explained step by step, with hands-on practice at every stage.

Your Overall Progress

0%

0 of 9 lessons completed

Three levels, ground up

Each level builds on the last: start with the fundamentals, move on to real layouts, then finish with advanced, responsive techniques. All three levels are ready, start with Lesson 1 below.

1

The Basics

What CSS Grid is, how rows and columns work, and your first simple layouts.

3 lessons • Beginner friendly
Available Now
2

Real Layouts

Build actual page layouts and learn to spot and fix common mistakes.

3 lessons • Real-world practice
Locked
Locked: complete Level 1 to unlock this level.
3

Advanced Techniques

Responsive grids, named template areas and auto-placement.

3 lessons • Advanced concepts
Locked
Locked: complete Level 2 to unlock this level.

The full CSS Path is ready

Start with Lesson 1, or explore the tools first if you would rather experiment.

Start Lesson 1 CSS Grid Generator