What is CSS Grid Overlay?

CSS Grid Overlay is a Chrome extension developed by https://imagentleman.github.io, and its main feature is "Easily check the grid alignment of your page across breakpoints.".

Extension Screenshots

Download CSS Grid Overlay Extension CRX File

Download CSS Grid Overlay extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

Supports multiples breakpoints and the usual grid values (gutters, columns, max width, etc).

Configurations can easily be saved and shared among team members as json objects.

Example conf:

[
{
"columns": 4,
"margins": 16, // px before and after the first and last column
// these gutters work like margins:
// if distance between columns is 32px, gutters are 16
"gutters": 16,
"from": 0, // start of breakpoint in px
// Optional values
// "to": 599, end of breakpoint in px
// grid will be centered after this maxWidth in px
// otherwise it'll be full width
// "maxWidth": 1440,
// if you want to move the grid
// (e.g. in a style guide with a left sidebar
// you'd use offsetLeft to push the grid to the right
// "offsetTop": 0,
// "offsetRight": 0,
// "offsetBottom": 0,
// "offsetLeft": 0,
// "backgroundColors": {
// "columns": "rgba(234, 23, 140, .3)",
// "gutters": "rgba(0, 231, 255, .3)",
// "margins": "rgba(0, 191, 165, .3)"
// }
}
]

Extension Basic Information

Name	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
Official URL	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Description	Easily check the grid alignment of your page across breakpoints.
File Size	181 KB
Installation Count	15,069
Current Version	10
Last Updated	2022-04-06
Publish Date	2020-02-02
Rating	4.43/5 Total 7 Ratings
Developer	https://imagentleman.github.io
Email	[email protected]
Payment Type	free
Extension Website	https://imagentleman.github.io
Help Page URL	https://github.com/imagentleman/css-grid-overlay
Supported Languages	en
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 3, "name": "CSS Grid Overlay", "version": "10", "description": "Easily check the grid alignment of your page across breakpoints.", "icons": { "16": "16.png", "48": "48.png", "128": "128.png" }, "background": { "service_worker": "background.js" }, "action": { "default_icon": { "16": "off-16.png", "24": "off-24.png", "32": "off-32.png" } }, "permissions": [ "scripting", "activeTab", "storage" ], "minimum_chrome_version": "88", "options_page": "options.html" }