CSS Grid is easy to explain and hard to internalise from slides alone, students need to drag values around and watch a layout break in real time before fr units and implicit rows actually click. Here is a lesson plan we have seen work well in bootcamps and single-session workshops, built entirely around the free Gridlock Holmes tools.

Before class

  • Share the CSS Grid Generator link so students can open it on their own machine, no account or install needed.
  • Print or share the CSS Grid cheat sheet from the footer of any page, so students have property names in front of them without switching tabs.
  • Have one deliberately broken grid layout ready to paste into Grid Detective for the final exercise (see the mistakes covered in our common mistakes post for good candidates).

The 60-minute plan

0–10 min

Warm up: rows vs. columns

Open the generator and ask students to guess what grid-template-columns: 1fr 2fr 1fr will look like before you hit apply. Change one value at a time and have the class predict the result out loud, this surfaces the "fr is a share of remaining space" misconception early.

10–25 min

Concept walkthrough

Cover explicit vs. implicit grid, gap, and named areas using the live code panel. Keep this section led by you, but pause every few minutes for students to reproduce what is on screen in their own generator tab.

25–45 min

Build challenge

In pairs, students recreate a simple three-column card layout (image, title, description) from a screenshot you provide. No starter code, they build the grid from scratch. Circulate and nudge rather than answer directly.

45–55 min

Grid Detective exercise

Give every pair the same broken CSS snippet and have them paste it into Grid Detective. Ask them to fix the errors first, then the warnings, and explain in one sentence why each one happened. This is usually the moment implicit grid sizing finally clicks.

55–60 min

Wrap up

Quick show of hands on what surprised them most. Point students to the Learn hub's CSS path for self-paced practice, and mention the Tailwind path if your course uses utility classes.

Timing tip: the build challenge is the section most likely to overrun. If a pair finishes early, ask them to add a responsive breakpoint that collapses the layout to one column, it keeps fast finishers busy without derailing the room's pace.

Adapting the plan

  • Shorter session (30 min): drop the build challenge and go straight from the concept walkthrough into the Grid Detective exercise.
  • Self-paced / async: record the warm up and concept sections as a short video, and let students do the build challenge and Grid Detective exercise as homework with a submitted screenshot.
  • Advanced group: swap the card layout challenge for the full Holy Grail layout from our tutorial post, and ask students to add a Tailwind version once the CSS version works.

All of the tools referenced here are free and require no sign-up, which makes this plan easy to reuse across sessions without worrying about account limits or setup time eating into the lesson.