Getting started with CSS Grid Layout

Helpful resources and tutorials to bring you up to speed

Yep, CSS Grid Layout is 🔥 so hot 🔥 right now. The layout system recently gained mainstream support — with the latest versions of Firefox, Chrome Opera and Safari now all on board with the spec.

But, just what is CSS Grid Layout (aka “Grid”), what can it do, and is it really production ready? I’m going to run down what you need to know, and share a ton of handy resources so you can get started. 👍

What is CSS Grid Layout?

First, a bit of history — Grid started life some six years ago, via a proposal sent to the CSS Working Group from Microsoft. This blog post from April 2011 outlines the initial proposal, and touches on how eventually Grid, along with Flexbox, will allow for dependable “adaptive layouts”.

How Microsoft visualized what Grid would aim to achieve back in 2011.

History lesson aside, here’s a brief outline description of Grid from the W3C:

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

If you want to dig deeper into the full spec from the W3C, you can here.

But how does this differ from Flexbox? Well, Flexbox is single-axis oriented, whereas Grid allows content to be aligned in both dimensions; as these illustrations from W3C below highlight:

An example of a Flexbox layout

What can now be achieved with Grid Layout

The takeaway is this: CSS Grid Layout is a new, powerful layout system that allows a web page to easily be divided into columns and rows.

With Grid you can make multi-column layouts with ease.

Helpful resources and tutorials

An endless supply of great tutorials and introductory posts have come out in the last few weeks while browsers have been gaining support. We’ve been keen an eye on them and here’s a handful of the best links and resources to go over to help you get started experimenting with CSS Grid Layout.

Basic Concepts of Grid Layout

by Mozilla Developer Network

An introduction to what grid is, how the grid container works, how to nest grid items and more.

developer.mozilla.org

A Complete Guide to CSS Grid Layout

by Chris House

A thorough guide covering the latest version of the Grid specification. Chris goes over all the properties you need to know, and provides an overview of the top-level concepts — all with practical code and visual examples.

chris.house/blog/a-complete-guide-css-grid-layout

Grid by Example

by Rachel Andrew

Rachel, a CSS Working Group Invited Expert, has long been an advocate for CSS Grid adoption . She shares plenty of small examples on how to use Grid Layout, along with code, videos and other resources on her Grid by Example site.

Rachel runs through plenty of practical Grid examples, showing how it can used to create modern responsive layouts in this recent talk:

Finally, another useful resource from Rachel: If you're unsure whether to use Grid or Flexbox, then here’s the key differences between them.

gridbyexample.com

Case Study: My First Practical CSS Grid Layout

by Tyler Sticka

In this case study Tyler goes through the ‘old way’ of doing things and then attempts to reach the same result using the ‘Grid way’.

cloudfour.com/thinks/first-css-grid-layout

3 CSS Grid Features That Make My Heart Flutter

by Una Kravets

Front-end developer Una shares three CSS Grid features that she’s excited about including minmax() and named areas, in a bid to convince you to give Grid a try.

una.im/css-grid

Practical CSS Grid: Adding Grid to an Existing Design

by Eric A. Meyer

Eric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers.

alistapart.com/article/practical-grid

Grid Garden

by Thomas Park

Grid Garden is a fun little browser-based coding game where you write CSS code to grow your carrot garden. This is an ideal practical way to learn some of the basics.

“My objective with Grid Garden is not to cover every last aspect of CSS grid, but to help players develop an intuition and recognize its potential.”

cssgridgarden.com

CSS Grid Cheat Sheet

by Ali Alaa

A good visual playground to get to grips with the terminology, properties and how the grid layout generally works in the browser.

alialaa.github.io/css-grid-cheat-sheet

So, is CSS Grid Layout production ready?

Support as of April 2017

The TL;DR here is: It depends how comfortable you are with cutting edge features, but perhaps not quite yet.

The above screenshot from Can I Use generally looks pretty rosy, showing that the majority of mainstream, up-to-date browsers are ready to go and can support unprefixed CSS Grid properties.

Microsoft are the obvious outliers, with both Edge and IE offering only partial support via the -ms- prefix. Native support in Edge/IE is on the way — an update to the CSS Grid implementation is now one of the top features requested by developers ( ⬅️ you can vote here if you want to see it sooner).

Now, although the majority of browsers do support Grid Layout, it’s only the latest versions/builds that do — this represent around 30–40% of global browser use. So unless you know your users are using up-to-date browser builds Grid isnt quite ready for mainstream sites. However, that doesn’t mean you should start experimenting and getting to grips with things.

Want more like this? Subscribe to FrontEnd Focus for a weekly email with the best links, news and tutorials from the world of frontend web dev: