Skip to main content

Get up to speed with CSS Grid

Over the past few years, it’s been interesting to watch web layouts take centre stage within the world of CSS. The main catalyst for this coming to the forefront is a better understanding by everyone of the importance of the user experience and content flow of any responsive website. Or maybe we’re in a post-float development world. First with Flexbox and most recently with CSS Grid layout options, our choices and abilities for thoughtful layouts are expanding greatly.

Can I Use CSS Grid Layout has up-to-date info regarding browser adoption rates

Can I Use CSS Grid Layout has up-to-date info regarding browser adoption rates

We’re still in the early days of Grid’s adoption in browsers. Visit caniuse.com/#feat=css-grid (opens in new tab) for some interesting numbers and notes around the current adoption.

It is currently supported on the WebKit Nightly if prefixed with -webkitand it looks like non-mobile browsers such as IE, Edge, Firefox, Chrome, Safari, and Opera will all have partial to full support in their next release. My hope is that relatively soon, the global support percentage will have gone up significantly from the current 6.28 per cent.

See Chris House’s A Complete Guide To Grid for a comprehensive introduction

See Chris House’s A Complete Guide To Grid for a comprehensive introduction

There are some helpful resources around CSS Grid. Luckily, css-tricks.com/snippets/css/complete-guide-grid (opens in new tab) has a complete guide, written and updated by Chris House (opens in new tab).

Rachel Andrew’s interactive examples of Grid Layout are a handy learning tool

Rachel Andrew’s interactive examples of Grid Layout are a handy learning tool

Also, for the more visually inclined, Rachel Andrew (opens in new tab) has done a phenomenal job collecting all resources around grid, with blog updates and, best of all, examples of common UI patterns (opens in new tab). These resources should have you up and running in supporting browsers in no time.

This article was originally published in net magazine (opens in new tab) issue 293. Buy it here. (opens in new tab)

Related articles:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Sam is a designer living in Austin, Texas, who speaks and writes extensively about web and product design, diversity, inclusion, and equity. In 2011, she wrote the first university course on the topic of Responsive Web Design. She is currently Design Director at thoughtbot, and serves on several design advisory boards in Austin.