Learning Resources

Tools, games, and documentation to master CSS Layouts

Interactive Games

Flexbox Froggy

Help Froggy and friends by writing CSS code! A fun game to learn Flexbox properties like justify-content and align-items.

Play Now

Grid Garden

Grow your carrot garden by mastering CSS Grid. Learn grid-template-columns, grid-area, and more in a relaxing environment.

Play Now

Documentation & Generators

MDN Web Docs

The definitive source for CSS documentation. Deep dives into every property with browser compatibility tables.

Read Docs

CSS Grid Generator

A visual tool to create complex grid layouts. Click to draw lines and export the CSS code instantly.

Open Tool

Flexbox Builder

Visually build flexbox containers. Adjust direction, wrap, and alignment sliders to see real-time changes.

Open Tool

Quick Reference Cheatsheets

Download or bookmark these quick reference guides for your daily workflow.

Grid Cheatsheet

PDF Download

Flexbox Cheatsheet

PDF Download

Grid vs Flex

Decision Matrix