grid critters

sign in

CSS Grid is game-changing.

Revolutionary. Makes building modern layouts a snap.

  display: grid;

But... here you are, still guessing.

Still wracking your brain trying to remember how to use it.

You tab back to that same old cheat sheet. Again. You read up on grid-auto-flow. Again. Hoping that's even the right property, you try it:

  display: grid;
  grid-auto-flow: column dense;

Your heart sinks. Why did that give your Grid four new rows? Where did your content section disappear to?

Frustrated, you open up the devtools and mess around with grid-auto-rows and a few other random properties. But nothing works.

Your confidence is as broken as your layout.

You know CSS Grid is a frontend developer's dream. Why isn't it clicking for you?

What if you knew Grid inside and out?

To have complete mastery — where every property and value just made perfect sense?

You could build any layout you wanted.

Effortlessly. From scratch. You'd just picture the Grid in your mind and whip it up — from heart — in seconds.

  display: grid;
  grid-template-columns: 200px 2fr;
  grid-template-rows: 100px repeat(2, 1fr);
  grid-gap: 5%;
  grid-auto-rows: minmax(auto, 300px);

Frontend development would be fun again.

You'd live in your code editor, enjoying that sweet state of uninterrupted flow. You'd land the interesting projects. There'd be absolutely no UI you couldn't tackle.

You'd never forget.

CSS Grid would be more than just something you'd memorized. It would be a part of you. Muscle memory. The way you think. The way you see the world.

CSS Grid can feel overwhelming. Complex. Cryptic and impossible to remember. It doesn't have to be that way! You just need something to finally make it click.

Your Adventure Begins

Completely learn CSS Grid once and for all by playing Grid Critters: the game of Grid mastery.

Your journey begins on the mysterious planet Grideros. Your mission is to use your ship's powerful Grid tool to save alien critters from extinction.

Internalize the spec

You control your ship through Grid code. Using direct manipulation you experiment and see how your changes affect the planet. An animation engine shows you how CSS Grid actually works. Use what you learn to beat the levels and save the critters.

Level up gradually

You'll upgrade your ship and your skills by overcoming the obstacles you'll face. You'll build a solid understanding of CSS Grid thanks to the proven process of scaffolding. Become an expert — one concept at a time.

Practice makes perfect

Grid syntax will become second nature through deliberate practice. Never forget! Cement it in your brain through spaced repetition — while enjoying hundreds of unique, fun levels.

Chapter One: Grideros

Chapter Two: Mind the Gap

Chapter Three: Life on the Line

Chapter Four: Grid Devils

Chapter Five: Ancient Runes

Chapter Six: Fill the Pockets

Chapter Seven: Out the Airlock

Chapter Eight: Sentient

Chapter Nine: Deception

Chapter Ten: Central Command

"After all my recent complaints about the low bar set by most online training courses today (dull, lack of explanatory pictures, lazy sitting in IDE, death by bullet point, talking code NOT teaching etc.) I am blown away by Grid Critters."

— Ian Smith
Frontend Developer

"Fantastic work. Have fun and learn CSS Grid. It's worth every single penny!"

— Luciano Mammino
Web Developer

"I was a fan of Flexbox Zombies, but Dave has outdone himself with Grid Critters. To really understand CSS Grid, you need to get deep into the fundamentals, and you need to practice. This course is gamification done right. It works. It uses proven techniques like spaced repetition to drive well explained concepts home. I loved completing the missions in each chapter. You can tell that Dave has put a huge amount of heart into this, and has created an incredibly enjoyable way to learn the future of frontend layout."

— Dion Almaer
Director of Engineering, Google

Ready to level up?

Become an expert of CSS Grid — enroll in Grid Critters today. You'll be shipping perfect Grid layouts to production in no time.

Price: $179 — Mastery Games launch special!

Master CSS Grid Now