DEV Community 👩‍💻👨‍💻

Cover image for Chrome DevTools: Grid Explorer
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Chrome DevTools: Grid Explorer

I like to look at the "What's New" tab in Chrome Dev Tools every now and then.

This time the update is 87, and I've noted they updated the CSS Grid debugging options!

Chrome 87 CSS Grid

Time to explore what's new and what it can do for us!

Chrome Dev Tools CSS Grid debugging

First, we need to open the Chrome Dev Tools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Now we can use the Elements inspector where we can see all the elements in there you will see the [grid] block behind grid elements; this was the existing feature.

Grid gif

This little toggle will show us the grid overview, but that is about it.

In the new feature, there is a whole grid explorer under the Layout tab.

You can find the layout tab on the bottom of your dev tools.

Chrome dev tools - Layout

Within this tab you will see all the grids that are on the page. In this case, it's just the one.

You can check the little checkbox before your grid, and it will highlight the grid.

Then next to it is a small color picker so you can change the default red color.

You might think that's not much more than the above [grid] block does.

But there are a bit more powerful items above.

You can toggle the following checkboxes:

  • Show track sizes: Will show the sizes of each grid block
  • Show area names: Show the names of each area you defined
  • Extend grid lines: Will render the grid further on the page

As you can imagine, this can help us really well defining which block is rendered where.

I love this new area names function, and I'm sure it will help many of you exploring how grid works.

Thank you Chrome DevTools for making grid debugging even better!

I've made this little gif to showcase what happens when you toggle each option.

Chrome dev tools CSS Grid options

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (11)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Firefox has had similar tools for a good year or so I think

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

Only the Dev edition, and I regularly use it...

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah, they haven't shipped it in the normal one yet?
I don't keep track of Firefox dev tools 🦊

Thread Thread
 
nikhilmwarrier profile image
nikhilmwarrier

They have a basic devtools in the normal version, but a much more advanced one with flexbox and grid inspector in the dev edition...

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome, I think most browsers come with the tools these days 🤩

Collapse
 
amindeist profile image
Amin Ahmadi

Nice

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Amin!

Collapse
 
jspiderhand profile image
Justin Stout

Its about time this came to Chrome! Thanks for sharing

Collapse
 
dailydevtips1 profile image
Chris Bongers

Indeed! Some super helpful tools now.
Next, A double border-radius tool?

Collapse
 
kalashin1 profile image
Kinanee Samson

Thank you, quite helpfu

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Kinanee, glad you like it

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-