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.
Stats
Users:
10,000+
Rating:
4.43
(7)
Creation date:
2020-02-02
Risk impact:
Very low risk impact
Risk likelihood:
Very low risk likelihood
Manifest version:
3
Permissions:
Size:
185.34K
Email:
im*****@gmail.com
URLs:
Website
Stats date:
Chrome-Stats Rank
#
9716
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.
Summary
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.
Great for web developers! I tried few of similar extensions but this one is the best. I love being able to save multiple grid configs. ❤️️
great doing what it is supposed to do, very useful tool
Safety
Risk impact
CSS Grid Overlay is safe to use. It does not request any sensitive permissions.
Risk likelihood
CSS Grid Overlay has earned a good reputation and can be trusted.
Upgrade to see risk analysis details
Screenshots
Similar extensions
Here are some Chrome extensions that are similar to CSS Grid Overlay:
Gridman - front-end toolkit
Bootstrap Grid Overlay
Grid Builder
Foundation Overlay
Muzli - Design inspiration hub
NOV Grid - Responsive grid overlay
Grid System
Bootstrap Grid for any Website
Grrrid
CSS Peeper
Grid Ruler
Dimensions
https://fenvox.com
4.05
10,000+
rule-page-az
4.15
20,000+
https://beltslib.net
3.70
949
Daniel Samuels
4.50
836
https://muz.li
4.47
400,000+
Dennis Novriandi
5.00
674
abdullahrafique565
5.00
1,000+
Tam Nguyen
4.67
3,000+
david marsalone
3.68
1,000+
CSS Peeper
4.62
500,000+
tgohn
3.74
100,000+
https://www.felixniklas.com
4.13
200,000+