Firefox DevTools

Introduction to CSS Grid Layout

Firefox DevTools

Designers and developers are rapidly falling in love with CSS Grid Layout. That’s why Mozilla has been working hard on the Firefox Developer Tools Layout panel, adding powerful upgrades to the CSS Grid Inspector and Box Model.

CSS Grid Overlay

The new CSS Layout panel lists all the available CSS Grid containers on the page and includes an overlay to help you visualize the grid itself. You can customize the information displayed on the overlay, including grid line numbers and dimensions.

enable grid overlay on a grid

Interactive grid

There is a new interactive grid outline in the sidebar. Mouse over the outline to highlight parts of the grid on the pages and display size, area, and position information.

grid outline

Display grid area

The new “Display grid areas” setting shows the bounding areas and the associated area name in every cell. We'll learn more about how to set a grid area name in a bit.

grid area

Visualize transformations

The Grid Inspector is capable of visualizing transformations applied to the grid container. This lets you accurately see where the grid lines are on the page for any grids that are translated, skewed, rotated, or scaled.

grid transition

These features and improvements are currently available in Firefox Nightly and Firefox Developer edition. It is recommended that you download and install one of these browsers before continuing. These features are only available in Firefox and will help you as you learn about the ins and outs of CSS Grid Layout.

Get the browser with the best tools for Developers