CSS Grid Overlay

Easily check the grid alignment of your page across breakpoints.

What is CSS Grid Overlay?

'CSS Grid Overlay' is a Chrome extension, enabling developers to verify the grid alignment of their webpages across multiple breakpoints. It supports ordinary grid values such as gutters, columns, and max width. Configurations can be effortlessly saved and shared among team members as JSON objects. Thus, ensuring consistent design throughout.

Download

Extension stats

By: https://imagentleman.github.io

View on Chrome Web Store

Users: 10,000+

Rating: 4.43 (7)

Version: 10 (Last updated: 2022-04-06)

Creation date: 2020-02-02

Risk impact: Very low risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

scripting
activeTab
storage

Size: 185.34K

Email: im*****@gmail.com

URLs: Website

Ranking

# 10020 ▼ 27

Other rankings

#1720 in Developer Tools ▲ 2 #4 in grid keyword 23 #14 in overlay keyword 44 ▼ 1 #33 in column keyword 10

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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

User reviews

Love this! It's helping my dev and design teams align more easily. A doc page somewhere explaining the syntax would be helpful. But at least be sure to read the json example on the extension's page in the chrome store. Especially note that the gutter width parameter is HALF the full gutter width. I sometimes see the error that the JSON isn't valid, even though it passes in online linters. I refresh the extension's options page and then save it again--the error goes away.