Helpful resources and tutorials to bring you up to speed
--------------------------------------------------------

Yep, **CSS Grid Layout** is 🔥 [_so hot_](http://gph.is/1jFLtFf) 🔥 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. 👍

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

### What is CSS Grid Layout?

First, a bit of history — Grid started life some **six years ago**, via a proposal sent to the [CSS](https://hackernoon.com/tagged/css) Working Group from [Microsoft](https://hackernoon.com/tagged/microsoft). This [blog post from April 2011 outlines the initial proposal](https://blogs.msdn.microsoft.com/ie/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts/), and touches on how eventually Grid, along with Flexbox, will allow for dependable “adaptive layouts”.

![](https://hackernoon.com/hn-images/1*V_qFP83oTxFA1n9m3Djo6g.png)

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_](https://www.w3.org/TR/css-grid-1/)_._

**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](https://www.w3.org/TR/css-grid-1/#intro) below highlight:

![](https://hackernoon.com/hn-images/1*ViuE3c6ioq3df96id74JiQ.png)

An example of a Flexbox layout

![](https://hackernoon.com/hn-images/1*ZSxLgEAYE-OSV5CKoottCQ.png)

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._

![](https://hackernoon.com/hn-images/1*dxIvo1r6-heUUp6fW11YZQ.png)

### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

_by_ Mozilla Developer Network

[![](https://hackernoon.com/hn-images/1*IeEQuOANc7NTBjz45K9BHQ.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

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

> [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### [A Complete Guide to CSS Grid Layout](http://chris.house/blog/a-complete-guide-css-grid-layout/)

_by_ Chris House

[![](https://hackernoon.com/hn-images/1*ssXAihIMPIbtXUIHZtBbGw.png)](http://chris.house/blog/a-complete-guide-css-grid-layout/)

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_](http://chris.house/blog/a-complete-guide-css-grid-layout/)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### [Grid by Example](http://gridbyexample.com/)

_by_ [Rachel Andrew](https://medium.com/@rachelandrew)

[![](https://hackernoon.com/hn-images/1*W5J2qSy8p-UdnT6pFpgL2Q.png)](http://gridbyexample.com/)

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](http://gridbyexample.com/) site.

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

![](https://i.ytimg.com/vi/N5Lt1SLqBmQ/hqdefault.jpg)

Finally, another useful resource from Rachel: If you're unsure whether to use Grid or Flexbox, then here’s [the key differences between them](https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/).

> [_gridbyexample.com_](http://gridbyexample.com/)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### Case Study: My First Practical CSS Grid Layout

_by_ Tyler Sticka

![](https://hackernoon.com/hn-images/1*Y33JXOydxbdVUGEc3Cq3Yw.gif)

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_](https://cloudfour.com/thinks/first-css-grid-layout/)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### [3 CSS Grid Features That Make My Heart Flutter](https://una.im/css-grid)

_by_ [Una Kravets](https://medium.com/@unakravets)

[![](https://hackernoon.com/hn-images/1*kpJWBDm7fNcgZyZm1VPTfA.png)](https://una.im/css-grid)

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_](https://una.im/css-grid/)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### [Practical CSS Grid: Adding Grid to an Existing Design](https://alistapart.com/article/practical-grid)

_by_ [Eric A. Meyer](https://medium.com/@meyerweb)

[![](https://hackernoon.com/hn-images/1*su1sHBaeXsPn_OBEsdlW3Q.png)](https://alistapart.com/article/practical-grid)

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

> [_alistapart.com/article/practical-grid_](https://alistapart.com/article/practical-grid)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### [Grid Garden](http://cssgridgarden.com/)

_by_ Thomas Park

[![](https://hackernoon.com/hn-images/1*gFBc6hD6X-XKzB-unknpZg.png)](http://cssgridgarden.com/)

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_](http://cssgridgarden.com/)

![](https://hackernoon.com/hn-images/1*S4XxwQhS4AgmgUhsH2ViaA.jpeg)

#### CSS Grid Cheat Sheet

_by_ Ali Alaa

![](https://hackernoon.com/hn-images/1*JTeDAhNQJipjlK9RHKy7rw.png)

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_](https://alialaa.github.io/css-grid-cheat-sheet/)

![](https://hackernoon.com/hn-images/1*dxIvo1r6-heUUp6fW11YZQ.png)

### **So, is CSS Grid Layout production ready?**

![](https://hackernoon.com/hn-images/1*lUT3bsi36lSZ0hm-62vsoQ.png)

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](https://caniuse.com/#feat=css-grid) 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](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/category/86947-css) _(_ ⬅️ _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.

![](https://pbs.twimg.com/profile_images/815292019081936896/6up9dULL_bigger.jpg)

![](https://hackernoon.com/hn-images/1*dxIvo1r6-heUUp6fW11YZQ.png)

**Want more like this?** Subscribe to [_FrontEnd Focus_](http://frontendfocus.co/) for a weekly email with the best links, news and tutorials from the world of frontend web dev:

![](https://upscri.be/media/form.jpg)

Microsoft

Mozilla

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

Getting started with CSS Grid Layout

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@chrisbrandrick

RELATED STORIES