For Educators

Free CSS Grid classroom resources

Use the free slide deck, interactive tools and student exercises to teach CSS Grid layouts visually. No signup required for you or your students.

Free forever • No signup • Editable PowerPoint slides

What is included

Everything you need to run a CSS Grid lesson

Teaching slide deck - 30 slides, editable PowerPoint
Visual examples - diagram plus code plus live demo for each concept
Grid Detective exercises - ready-made grid examples with mistakes for students to find and fix
Lesson plan notes - speaker notes and timings on every slide
No account needed for students - works immediately in any browser
More resources coming - Tailwind slides and SCSS exercises in development

PowerPoint (.pptx) 30+ slides Free forever No signup

Direct download • No email required

Classroom Guide

These steps work for a 60 to 90 minute session. Adjust to suit your class.

1
Open the slides - introduce CSS Grid and session goals
2
Live demo the CSS generator - demonstrate columns, gaps and alignment on screen
3
Run a build challenge - students recreate a common webpage layout (like Holy Grail) using the generator.
4
Grid Detective exercise - students fix a broken grid in pairs
5
Export the code - students copy their finished grid code into a real project.
6
Homework - direct students to /learn/ to continue at their own pace

Who uses it

GCSE and A-level computer science, web design and digital media

Web development, UX design and software engineering programmes

Fast-paced instruction with live visual feedback for students

Interactive supplement to video-based CSS Grid content