Helpful resources and tutorials to bring you up to speed Yep, is 🔥 🔥 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. CSS Grid Layout so hot But, just (aka “Grid”), , and ? 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 what can it do is it really production ready What is CSS Grid Layout? First, a bit of history — Grid started life some , via a proposal sent to the Working Group from . This , and touches on how eventually Grid, along with Flexbox, will allow for dependable “adaptive layouts”. six years ago CSS Microsoft blog post from April 2011 outlines the initial proposal 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 . Well, Flexbox is single-axis oriented, whereas Grid allows content to be aligned in dimensions; as these below highlight: But how does this differ from Flexbox? both illustrations from W3C An example of a Flexbox layout What can now be achieved with Grid Layout CSS Grid Layout is a new, powerful layout system that allows a web page to easily be divided into columns and rows. The takeaway is this: 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 Mozilla Developer Network by 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 Chris House by 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 site. Grid by Example 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 Tyler Sticka by 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 and named areas, in a bid to convince you to give Grid a try. minmax() 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 Thomas Park by 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 Ali Alaa by 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 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. Can I Use Microsoft are the obvious outliers, with both Edge and IE offering only partial support via the prefix. Native support in Edge/IE is on the way — an update to the CSS Grid implementation is now ⬅️ . -ms- 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. Subscribe to for a weekly email with the best links, news and tutorials from the world of frontend web dev: Want more like this? FrontEnd Focus

Microsoft

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Getting started with CSS Grid Layout

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Chris Brandrick

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Getting started with CSS Grid Layout

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Chris Brandrick

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES