πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
Get the Most out of CSS Grids with Chrome 87

Get the Most out of CSS Grids with Chrome 87

Easily debug CSS grids with the new grid debugger
Ferenc Almasi β€’ 2021 January 28 β€’ Read time 2 min read
Get your weekly dose of webtips
  • twitter
  • facebook
CSS

With the release of version 87, Chrome is catching up with Firefox and finally got a debugger for CSS grid as well. In your Elements panel, you should see a grid badge, next to those elements, whose display is set to grid. Clicking on the badge will toggle the debugger on and off.

Toggling the grid debugger on and off

This will show you various grid settings, such as the grid lines, the name of the areas, or track sizes. To tweak around with the settings, you can reach the debugger through your Layout panel. If you don’t see the Layout panel in your DevTools, you can reach it by hitting crtl + shift + p on your keyboard and type in β€œLayout”, then choose the β€œShow Layout” option.

Show Layout panel in DevTools

How the Debugger Enhances Grid Debugging

You can also see how many grids are created on your page and enable the overlay through the Layout panel directly. This makes it easier to quickly see and inspect, which elements’ display is set to grid on the page.

Grid overlays are shown on the layout panel
See all grids and toggle them on and off

You can also set the color of the grid itself, and apart from accessing grid elements directly, you have a couple of more customization options.

Changing the grid debugger color

Such as:

  • Extending grid lines: Makes the grid lines extend outside of the grid itself
  • Showing track sizes: Shows the size of each track, eg.: 1frβ€’70px
  • Showing area names: If you use grid-template-areas with named areas, you can set the debugger to show them in your overlay
  • Showing line number or names: Shows the number of lines or names associated with it
Track sizes shown on the grid overlay
Enabling the size of each track through the debugger

And that is all you need to know about the grid debugger. It lets you see how your grid behaves and makes it easier to debug and resolve issues. If you would like to learn more about the grid layout, check out how you can create a fake masonry using nothing more but CSS. Thank you for reading through, happy styling! 🎨

Simple Ways to Fake Masonry in CSS
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.