Grid Quest — Learn CSS Grid Through Puzzles

Why this project?

CSS Grid is one of the most powerful layout systems ever created for the web, yet many developers still find it intimidating. Games like Flexbox Froggy proved that learning CSS through puzzles works beautifully. Grid Quest extends that approach to CSS Grid with a progressive curriculum of visual puzzles.

What is it?

Grid Quest is a gamified learning tool that teaches CSS Grid through visual puzzles. Each level shows you a target layout and challenges you to write the correct CSS Grid properties to match it. As you progress, you will learn grid-template-columns, grid-template-rows, repeat(), fr units, grid-template-areas, and more.

How does it work?

Each level defines a target grid layout using colored areas. Your job is to write CSS that creates the correct number of rows and columns. When you click "Check Answer", the game parses your CSS and validates the grid dimensions. On advanced levels, you must also define grid-template-areas to match the target layout exactly.

How to use it

Select a level from the left sidebar (or hamburger menu on mobile).
Read the challenge at the top — it describes what layout to create.
Write CSS in the code editor below the grid previews.
Click "Check Answer" to test your solution.
Use "Hint" if you get stuck — it shows a clue about the concept.
Use "Reset" to clear your code and start over.
Press Tab in the editor for indentation.
Press Ctrl+Enter to quickly check your answer.
Completed levels are marked with a green check. Move forward to unlock more challenges!