Is there CSS Grid highlighting in Chrome Developer Tools?

css google-chrome css-grid developer-tools
asv picture asv · Jan 23, 2018 · Viewed 46.4k times · Source

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?

Answer

TylerH picture TylerH · Jan 23, 2018

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:grid applied to it.

CSS Grid highlighting example

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).

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More