Nitty Griddy: A CSS Grid Overlay

Download extension

This extension provides an overlay for elements styled with CSS GridCSS Grid has finally landed. All major browser vendors shipped broad support of the CSS Grid specification in March 2017. And it is here to stay!

Dive right in and give web layout a new twist—this plugin will support you while you tackle all aspects of CSS Grid. Use the Chrome context menu (right-click somewhere inside your grid) and choose "Get down to it". You will immediately see an overlay that updates in realtime while you debug your CSS Grid code inside the Chrome dev tools.

This plugin is still in progress, so please reach out to me for bug reports or feature requests. Just drop me a line on the extension's GitHub page.

Planned updates:
* Overall polish, new icon, options page
* Toggle grid overlay (currently you have to refresh the page to get rid of the overlays)
* Better support of subgrids and align-/justify-content stretched/space-around/space-between/space-evenly

Examples from the screenshots are by Jen Simmons (http://labs.jensimmons.com/).