Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can CSS grid Lines be hidden when debugging using chrome dev tools?

Hello I am trying to fix spacing on a modal I am working on and the background is a grid of images. I don’t want to disable css grid because that will make me feel more crazy when I am trying to debug css issues.

I would just like to find a way to disable the overlay I see when I open the chrome dev tools. Does anyone know a way I can do this?

here is an example:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

photo of the css grid

>Solution :

See Inspect CSS grid layouts – Grid overlays

Enable overlay views of multiple grids

You can enable overlay views of multiple grids
screenshot of Chrome dev tools

Toggle the checkboxes assigned to each grid layout element to enable / disable the overlay.

There is also a similar control for Flexbox overlays.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading