In the developer tools of Firefox, it is possible see the CSS grid, and also see when it is not selected.
Is it possible to show a CSS Grid in the developer tools of Chrome, also when the grid is not selected?
Add a comment
|
2 Answers
Chrome v62 added Grid highlighting support to its dev tools:
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has
display:gridapplied to it.
The Chrome Developers article above also includes a link to a short Google Developers YouTube video on using it: https://www.youtube.com/watch?v=AqwPrR7hklE
Prior to Chrome v62 there was no way in the Chrome dev tools to inspect grids like this. It's one of areas where Firefox dev tools were—and continue to be—significantly stronger. At the time, Chrome-latest did support the highlighting of various CSS Grid cells and tracks, though.
There are also CSS Grid inspector addons for Chrome that may support this feature. I don't use any of them, but there are at least half a dozen I have seen. One that looks promising is Gridman - CSS Grid Inspector (I have no affiliation with this addon or developer).
Comments
Actually Chrome Dev Tools (at least from version 62 from August 2017) do provide without addon CSS grid highlighting:
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.
2 Comments
Adam Richardson
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
sripwoud
Right. Thanks for the tip! (not so much experience in contributing to answers yet...). Answer updated!