CSS Grid and Flexbox have revolutionised what’s possible in layout design on the web. Both offerings are far more powerful than any layout techniques that came before them. Each one enables you to create more inspiring and unusual site designs.

In this article, we’ve rounded up some of the best resources – from blog articles to tutorials – on both Grid and Flexbox to help you get the most out of them. 

Best for: overviews and insight

Every Layout 

This resource, created by Heydon Pickering and Andy Bell, teaches you how to better harness the built-in algorithms that power browsers and CSS. Tips on using Flexbox and Grid are threaded throughout the site. 

Exciting Things on the Horizon For CSS Layout

In this blog, Michelle Barker presents an overview of some exciting things that could have a big impact on CSS layout in the very near future, including Masonry-style layouts in Firefox (see below) and Chrome support for the gap CSS property in Flexbox.

Grid for Layout, Flexbox for Components

In this article, Ahmad Shadeed, an independent product designer and front-end developer from Palestine, explains the differences between CSS Grid and Flexbox, looks into how to decide which to use and how to combine both modules, and presents use cases and examples. 

Learn Box Alignment

Also by Ahmad Shadeed, this article – which comes with interactive demos – walks you through box alignment and how it works with both CSS Grid and Flexbox. The premise is that you have a table and four plates. You’ll learn how to align the plates differently using both layout methods. 

A Guide to CSS Grids for Designers: Flexbox, CSS Grid, Floats & Clears

A nice little overview of the history of CSS layouts and what you can do with Flexbox and CSS Grid. Each grid option has its perks, and you don’t have to be restricted to just one. In most cases, mixing and matching techniques will provide the best results.

CSS Grid techniques

Making a Responsive CSS Grid Layout With Just 3 Properties

You only need to know three CSS properties to make a fully responsive template based on CSS Grid, as this article by software engineer Daniel Nastase proves.

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

A good companion piece to the above article, this one covers the smallest possible set of grid properties you need to know to meet most of your layout needs. The properties discussed are display (for the grid value), grid-template-columns, grid-gap, grid-auto-flow and grid-column / grid-row.

Understanding CSS Grid: Creating A Grid Container

This new series on Smashing Magazine, written by editor-in-chief Rachel Andrew, aims to take you from CSS Grid beginner to expert. The first part covers what happens when you create a grid container and the various properties that you can use on the parent element to control your grid. 

Understanding CSS Grid: Grid Lines

In part 2, Rachel Andrew explains how to place items against grid lines by adding properties to the direct children of the grid container. Among other things, she covers the placement properties, how to use grid-area to place by line number, and how to place items according to line name.

Understanding CSS Grid: Grid Template Areas

In the final part of her series on the CSS Grid Layout spec, Rachel Andrew explores how to use the grid-template-areas property to define placement on the grid and find out how the property really works. Rachel says this method is a lovely way to experiment with layouts, and she often uses it when prototyping a layout.

CSS Grid Template Areas In Action

Ahmad Shadeed explains how to put the grid-template-areas property to use and shares his insights. He includes use cases and demos, reusability and design systems, progressive enhancement and more. 

The Firefox DevTools have some great options for debugging CSS. For example, it shows the grid area names and a little representation of the grid-template-areas value in the bottom right corner.

Flexible Layouts Without Media Queries

This article looks into how we can create flexible layout components with CSS Grid and math functions to gain more control over the hypothetical instructions we inscribe into our components.

Constrained CSS Grids Without max-width

Ethan Marcotte, who coined the term ‘responsive web design’, shares a little layout technique he’s using in this latest version of his site. He explains how he uses CSS Grid – and in particular the empty space around his design – to create a layout that has a maximum width but can also conveniently be extended into a full-bleed layout when needed.

Intrinsic Sizing In CSS

Ahmad Shadeed explores intrinsic sizing in CSS – including extrinsic sizing, min, max and fit content, browser support as well as use cases and examples – and explains how to use those values in combination with CSS Grid and other properties.

Flexible Grids

This article is part of CSS Tricks’ in-progress book of the best CSS tricks (to access it, you need to purchase MVP Supporter, or log in if you are a member). Chris Coyier explains how to make a column layout that doesn’t declare the number of columns or rows, but automatically instead. Chris calls it “the most famous and useful code in all of CSS Grid”.

CSS Grid Layout Module Level 2: Masonry Layout

This tutorial explains how you can enable a Masonry layout – a grid layout based on columns, as popularized by Pinterest – in Firefox Nightly and also contains a CodePen that demonstrates how it works. For more information, see Rachel Andrew’s thoughts on the proposal to add Masonry into the Grid specification, along with a demo and a request for readers to add their own comments on the CSS WG thread.

CSS Grid Projects

Flash Grid: Learn CSS Grid by Building a Grid System

Join Sebastiano Guerriero in building a lightweight grid system and deepen your understanding of CSS Grid. The article touches on the main CSS Grid properties, and includes some practical tricks to get the most out of this powerful layout system.

New Year, New Job? Let’s Make a Grid-Powered Resume!

Developer Ali Churcher explores how to use CSS Grid to create a layout for a CV that looks great when printed out at different screen sizes, just in case an employer or client needs a physical copy, too.

Building My Bullet Journal Layout With CSS Grid & Subgrid & Flexbox

Visual designer and front-end developer Stephanie Stimac explains how she built her bullet journal demo, which she uses to track a few monthly goals, bills, her weekly tasks and her schedule. As subgrid isn’t supported in all browsers yet, she redefines the template columns from the parent grid.

Crafting a Cutout Collage Layout with CSS Grid and Clip-path

This article explains how you can use CSS Grid, Flexbox and clip-path to code up an accessible and responsive layout featuring a subtle parallax scroll effect (made possible with just one line of JavaScript!). 

A CSS Grid Framework for Shopify Collection Pages

All of the pages of a Shopify store can adopt CSS Grid, but one that can benefit the most from a robust and clean grid layout is the collection page. This article goes over how to set up a grid layout for products on your collection pages, and how to use Shopify’s section settings to create customizable options in the online store editor. 

How to Stack Elements in CSS

Sarah Drasner explains that you can use display: grid; to stack elements without setting any absolute positioning. She demonstrates two different ways – one with the position property and one with CSS Grid – you can use if you need two elements to overlap or exist in the same place, or may even just need them to be positioned near or next to each other. 

Overlapping Header with CSS Grid

In this article, Jonathan Snook, who’s been playing with CSS Grid (check out his clever use of nth-child), explains how he made the header in his design overlap the content with CSS Grid. No need to use negative margins anymore, you can now achieve this effect with CSS Grid. 

Flexbox

4 CSS Layouts Without Using Media Queries

Inspired by a tweet that showed how just 13 lines of CSS can give you four separate layouts, this post demonstrates that thanks to Flexbox it’s possible to make responsive layouts without having to define fixed breakpoints with media queries. 

Centering Things with CSS Flexbox

Especially useful for beginners, this article (with accompanying screencast), covers centering horizontally and vertically with Flexbox as well as spacing to the left and right. 

Flexbox and Absolute Positioning

Chen Hui Jing looks at what happens when you absolutely position a flex item and talks about a related bug in Firefox’s developer tools. 

Safe/Unsafe Alignment in CSS Flexbox

Learn how safe alignment can prevent data loss in CSS Flexbox layouts.

Demos

Responsive CSS Grid – Books

A “product grid” demo by Andy Barefoot using CSS Grid, clip-path, Conic Gradient, Lea Verou’s CSS conic-gradient() polyfill and a colour palette taken from Jay Fletcher’s work on Dribbble.

CSS Grid: Cross Stitch

Olivia Ng used 1060 divs to create a stunning, grid-based illustration. Recommended if you like to test your patience.

Flexbox Responsive Form

Adam Argyle created this responsive form with four potential layouts that is powered by Flexbox.

CSS Mondrian

Piet Mondrian-style art using CSS Grid made by Adam Fuhrer.

Video tutorials

A Grid of Squares

In this video (and tutorial), Chris Coyier of CSS-Tricks and CodePen fame, uses CSS Grid to build a literal grid of squares with some logos centred inside each square. You’ll learn a nifty trick to ensure the grid items maintain an aspect ratio, as well as how to use object-fit and absolute positioning.

Layout with CSS Grid & Subgrid

These videos presented by Mozilla Developer, Miriam Suzanne explain how to build some previously-complex layouts in under 10 minutes, why you don’t need to wait to use subgrid for better card layouts and how to align form labels and inputs in a grid-like layout with CSS subgrid, and several quick fallbacks.

CSS Grid – 10 Examples

James Q Quick spent two weeks learning about CSS Grid and in this video shows you how to use it by creating 10 examples with CSS Grid.

Prototyping in the Browser with CSS Grid Layout

Learn the benefits of prototyping web page layouts using CSS Grid Layout in this hands-on tutorial with Jeremy Osborn. He does a great job of explaining why prototyping in the browser with CSS Grid is so powerful.

For more information about CSS Grid and Flexbox, also check out Mozilla’s MDN web docs on CSS Grid Layout, CSS Flexible Box Layout, and the relationship of grid layout and flexbox to other layout methods.