While Grid and Flex revolutionized web design with their means of accurately laying out content with fewer hacks, they’re mechanisms that can be tricky to get your head around. If you’re feeling lost, try these excellent tutorials and hands-on sandbox apps.

1
Flexbox Froggy

Nearly ten years old, Flexbox Froggy is one of the earliest and most famous examples of interactive CSS learning. This online game teaches you the fundamentals of Flexbox, otherwise known as the CSS flexible box layout module.

The game works by presenting a set of cute frog characters in a grid, unfortunately separated from their lily pads. Using an editable text box, your task is to fill in the blanks, using properties like justify-content and align-items.

Your decisions will position the frogs at appropriate spots within their pond, hopefully lining each frog up with its respective lily pad. The frogs are color-coded to match specific lily pads, so you’ll need to swap them around as the difficulty increases.

The game doesn’t take itself too seriously, so you can select any level you like at any time. Each level has a clearly-presented task and the game displays helpful clues when you click on a specific CSS property name. There’s even a colorblind mode that adds patterns to differentiate between each frog.

The series finishes with one big test of your overall knowledge, which is a highly satisfying challenge.

Once you’ve mastered Flexbox, you can move on to CSS grid with the sequel, Grid Garden. This follow-up teaches the fundamentals of two-dimensional layout using the same approach, this time tasking you to water a garden and keep it free from weeds.

2
Learn CSS Grid

Speaking of CSS grid, here’s a comprehensive guide to this more advanced layout technique. Learn CSS Grid is a self-contained, single-page guide that works equally well as a visual reference and a beginner’s tutorial.

Working up from first principles to advanced techniques, this guide takes you through the complexities of CSS grid one property at a time. It isn’t interactive, but the excellent examples more than make up for this, showcasing exactly how each property and value contributes to an overall layout. The accompanying diagrams are simple, but they illustrate each point effectively.

While the later examples are more practical, the focus here is on clearly explaining each property, its quirks, and its behavior when combined with others.

The result is a much more approachable companion to the official specs, which may seem a little intimidating if you’re new to CSS. But if you’re adding grid to your CSS repertoire, or following on from one of the more hands-on resources here, this is a perfect reference to have bookmarked.

3
Grid by Example

This site promises “everything you need to learn CSS Grid Layout” and it delivers, with examples of specific properties, higher-level samples of common design patterns, and even video tutorials. Created by Rachel Andrew, a member of the W3 CSS Working Group, Grid by Example features clear demos ranging from small component styles to entire page layouts.

The main examples include embedded Codepens that you can explore and experiment with to reinforce your understanding. They’re also each linked to the relevant part of the official specification, so you can dive deeper if necessary.

The alternate approaches mean there’s an easy way for you to learn, regardless of your preference. Whether you learn by deep understanding of every last detail or by drilling down from a high-level concept, you’ll find Grid by Example has you covered. The site has a wealth of additional material, beyond its core guides, with links to Rachel’s GitHub projects that track CSS bugs and answer FAQs.

4
An Interactive Guide to Flexbox

This guide scores big on its interactive examples that include tabs and sliders you can use to adjust properties. As you tweak these widgets, the accompanying CSS adjusts to match, and you’ll see the effect in real time on a sample component. This makes the learning immediate and it’s an accurate demonstration of what actually happens in your browser.

An Interactive Guide to Flexbox has excellent diagrams to clear up any confusion and it uses an amusing barbecue metaphor to explain axes, a commonly misunderstood concept.

This single-page article concludes with an excellent, practical exploration of a common task: laying out a login form. It uses Flexbox to provide four different layouts, depending on the space available, without using media queries at all. The technique is presented in three ways: an interactive example, a codepen, and an explanatory video.

The author followed up this guide with, predictably, An Interactive Guide to CSS Grid, which does just as good a job at explaining two-dimensional layout.

5
CSS Grid Layout Guide

Sooner or later, you’re bound to come across Chris House’s CSS Grid Layout Guide—and its partner, CSS Flexbox Layout Guide—at CSS-Tricks. This site has a lot of useful articles and guides, but this pair represents the very best it has to offer, and they’re probably the most cited CSS resource available. Almost every time I find myself with a question about grid or Flexbox, I seem to end up here.

These two guides are practically the standard for learning about CSS grid and Flexbox. They make excellent references, with straightforward diagrams and clear explanations of properties, grouped according to their purpose. They’re not necessarily for absolute beginners, but are well-suited to anyone transitioning from float-based layouts or older alternatives.

Each guide presents properties in two columns, one for those that apply to parent containers, and the other for children. This is a practical way of approaching the material, which helps reinforce your understanding of how these different mechanisms approach the problem of laying out content.

While both resources have many sections, including notes on terminology, browser support, and bugs, it’s the property sections that are most useful. The site actually expands these sections by default, leaving the others contracted, which emphasizes just how much they’re the main focus.

6
What The Flexbox?!

What The Flexbox?! is an older video course that remains relevant today. Presented by Wes Bos, a highly experienced web developer and teacher, this set of videos covers everything from flex-direction to the much-sought-after “equal height columns” layout.

Wes is an engaging presenter who explains each part of the code examples as he goes, and the series is well-suited for beginners and those familiar with the basics of CSS. If you like learning from an experienced voice, at a pace that will help you follow along with ease, this tutorial series is perfect for you. Most of the videos are 5–10 minutes long, so they don’t get too bogged down in detail, covering each topic accurately, but concisely.

While the videos are hosted for free on Wes’s site, which requires your email address for full access, you can also watch them on his YouTube channel. Like many of the resources here, there’s also a corresponding guide to grid.