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.
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.
Grid by Example
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.
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â.
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.
Practical CSS Grid: Adding Grid to an Existing Design
Eric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers.
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.â
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.
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: