Master CSS Grid with Firefox DevTools

Dustin Driver
Jul 17, 2017 · 2 min read

Frameworks like Bootstrap revolutionized responsive web design, but we’ve always wanted something native. Now we have it: CSS Grid. And Firefox has some awesome tools for learning it.

CSS Grid lets you build responsive websites with standard CSS. It’s really that simple. No JavaScript (as much as we love it), no additional frameworks. We’re prone to hyperbole — every new advancement in web design will “change everything,” — but CSS Grid really is revolutionary. You should learn all about it. Thankfully, Mozilla’s designer extraordinaire Jen Simmons has a fantastic list of resources for learning CSS Grid. And you can also play around with CSS Grid on your own.

Firefox Nightly has fantastic CSS Grid DevTools. Download the browser, then hit ⌘-option-i (Mac) or control-shift-i (PC) to launch DevTools. The Inspector-Layout Panel lists all the grid containers on your page and a has a grid overlay to help you visualize your layout. You can customize the information on the overlay, including grid line numbers and dimensions.

Image for post
Image for post

This is super helpful if you’re still getting to know CSS Grid and how it all works.

There’s also an interactive grid outline in the sidebar. Mouseover the outline to highlight parts of the grid on the pages and display size, area, and position information.

The new “Display grid areas” setting shows the bounding areas and its associated area name in every cell.

Image for post
Image for post

Finally, the grid inspector is capable of visualizing transformations applied to the grid container. This lets developers accurately see where their grid lines are on the page for any grids that are translated, skewed, rotated and scaled.

Check out the Mozilla Developer Network for a comprehensive guide on how to create flexible, responsive designs using CSS Grid. CSS Tricks also has a great guide for getting started with CSS Grid.

Mozilla Tech

Mozilla Tech showcases what is happening at Mozilla — what…

Dustin Driver

Written by

Seasoned and salty tech writer at Mozilla. Keeping the Internet open, healthy, and accessible for everyone. dustindriver.com

Mozilla Tech

Mozilla Tech showcases what is happening at Mozilla — what our engineers and community are working on and thinking about, and why that work is important to the web.

Dustin Driver

Written by

Seasoned and salty tech writer at Mozilla. Keeping the Internet open, healthy, and accessible for everyone. dustindriver.com

Mozilla Tech

Mozilla Tech showcases what is happening at Mozilla — what our engineers and community are working on and thinking about, and why that work is important to the web.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store