Grid Critters

sign in

CSS Grid is amazing

Grid is the best thing to ever happen to CSS. It makes building modern layouts a snap.

But learning Grid is hard work

Despite all the time you've spent studying Grid, you can never remember how to actually use it.

What does justify-content do again?!


  .life_is_pain { 
    display: grid;
    justify-content: ???;
    align-items: ???;
    grid-auto-flow: ???;
    grid-gap: ???;
  }

You constantly have to interrupt your work to go look things up. You're sick of being dependent on a cheat sheet.

What if you could master CSS Grid?

What would change for you if you were a Grid expert?

You could build anything

From scratch. Effortlessly. You'd just imagine the grid layout and bust it out, all on your own. 


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

CSS would actually be fun

You'd live in your code editor, not needing cheat sheets or anybody else's help. Just you—blissfully enjoying the sweet state of flow as you create incredible things.

The Grid Mastery Game

Grid Critters gently guides you to master CSS Grid in the most effective, thorough, playful and fun way possible.

Learn by doing

In this course you code actual CSS. You'll gain a deep understanding of how Grid layout works. You'll gradually become a CSS Grid expert — one concept at a time.

Make it stick

Grid can only become second nature through deliberate practice. We'll cement Grid into your brain through spaced repetition while you enjoy a course that feels like a video game.

To really understand CSS Grid, you need to go deep 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. It's an incredibly enjoyable way to learn the future of frontend layout. I loved it.

Grid Critters is sprinkled with humor, teaches and guides you with hints, and has a ton of lessons that gradually build up a solid understanding on how to use CSS grids. I've found it to be especially helpful!

In depth lessons

Play ten jam-packed chapters over ten fun days, getting a ton of actual Grid coding practice. By game end you'll know CSS Grid inside and out!

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

Fantastic course. It's so much fun and you actually learn CSS Grid. It's worth every single penny!

Become a CSS Grid expert

Lifetime access. 100% satisfaction guarantee. You'll be shipping perfect CSS layouts to production in no time!

$149

Master CSS Grid Now

Hi I'm Dave Geddes

A while back I was bored out of my mind at my UI Architect job. One day I realized that despite having more than a decade of frontend experience, I still had to stop and look things up just to code a basic layout. So I decided to master CSS once and for all, but quickly discovered that the existing materials didn't make things stick for me. I was still dependent on a cheat sheet, and felt like I was just guessing. Finally after countless hours of experimentation, deliberate practice and play—things clicked for me. And coding became awesome.

I could effortlessly build any mock I was handed. Quickly prototype any idea I wanted. I actually enjoyed my work again. I decided to set out on my own to help my fellow UI devs experience the same thing. I want to help people reconnect with a love of learning, and help them achieve mastery — in a way that feels more like playing a game than following boring tutorials. Now I build Mastery Games full time and have found a lot of joy in helping tens of thousands of people become truly epic at frontend development.