CSS Grid Inspector: Examine grid layouts

This translation is incomplete. Please help translate this article from English

Grid icons in the Rules view

Нове в Firefox 52

Starting in Firefox 52 DevTools, you can ask the Inspector to overlay a representation of the grid when inspecting grid layouts.

When an element in the Rules view has a display: grid declaration, then it gets a grid icon next to it: . Click the icon to display the grid overlaid on the page, including grid lines and tracks:

The overlay is still shown when you select other elements, so you can edit the CSS for grid items and see how the grid is affected.

The Grid Layout panel

Нове в Firefox 56

Firefox 56 builds on previous grid features, providing an entire new layout panel full of options and information for debugging grids. You can find all the information you need about this in Powerful New Additions to the CSS Grid Inspector in Firefox Nightly.


Також дивіться

  • Більше цікавих прикладів Сітки дивіться на labs.jensimmons.com.