Master CSS Grid with Firefox DevTools

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.

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.

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.