gridcritters.com Open in urlscan Pro
35.156.224.161  Public Scan

Form analysis
0 forms found in the DOM

Text Content

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.

Dion Almaer
Director of Engineering — Google Chrome

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!

Megan Charles
Data Manager — Churchill Downs


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

 * Learn to layout perfect grid-template-rows and grid-template-columns
 * Build flexible, responsive designs with the brand new fr unit
 * Lay down the grid faster using the repeat shorthand


CHAPTER TWO: MIND THE GAP

 * Get just the right amount of spacing with grid-row-gaps and grid-column-gaps
 * Set both quickly using the grid-gap shorthand
 * Visualize the difference between % and fr tracks


CHAPTER THREE: LIFE ON THE LINE

 * Size and position anything with grid-row-start|end and grid-column-start|end
 * Balance designs by spanning items across multiple tracks
 * Learn how and why to name your grid lines
 * Make short work of positioning with the grid-row and grid-column shorthands


CHAPTER FOUR: GRID DEVILS

 * Use grid-template-areas for your content to fit perfectly into
 * Size and position items more efficiently using grid-areas
 * Learn the purpose of auto layout
 * Create whitespace in your layout with empty grid areas


CHAPTER FIVE: ANCIENT RUNES

 * Create highly flexible tracks using minmax
 * Adapt the grid to its content with min-content and max-content
 * Make the best use of available space with auto-fill and auto-fit


CHAPTER SIX: FILL THE POCKETS

 * Understand exactly how items flow into a grid
 * Setup your grids faster with the grid-template shorthand
 * Control the direction plus dense or sparse flow with grid-auto-flow


CHAPTER SEVEN: OUT THE AIRLOCK

 * Understand why your grid automatically creates implicit rows and columns
 * Control the width of implicit columns with grid-auto-columns
 * Control the height of implicit rows with grid-auto-rows


CHAPTER EIGHT: SENTIENT

 * Perfectly center or position a grid's items with justify-items and
   align-items
 * Override these for any grid item using justify-self and align-self
 * Grasp when to use start, end, center, or stretch


CHAPTER NINE: DECEPTION

 * Control the positioning of the grid itself using justify-content and
   align-content
 * Space out tracks using space-around, space-between, and space-evenly


CHAPTER TEN: CENTRAL COMMAND

 * Review what you've learned
 * Enjoy the epic story ending
 * Combine everything into the ultimate grid shorthand

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

Luciano Mammino
Senior Architect — FourTheorem


BECOME A CSS GRID EXPERT

 * 👾 be guided from zero to hero on CSS Grid
 * 🏗️ learn by doing— practicing literally hundreds of CSS layouts
 * 🔑 internalize all the Grid attributes and shorthands
 * 🧠 make it click and make it stick
 * 🛸 enjoy the interactive story experience
 * 🐙 become a master of CSS layout

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



$149 $89

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.