CSS Grid Overlay

Name: CSS Grid Overlay
Rating: 4 (8 reviews)
Author: http://imagentleman.github.io/

Easily check the grid alignment of your page across breakpoints.

Download

Install Compare

CSS Grid Overlay is a powerful Chrome extension designed for developers and designers to easily verify the grid alignment of web pages across multiple breakpoints. It supports essential grid properties such as gutters, columns, margins, and max-width settings, enabling precise inspection of layout consistency.

Users can create, save, and share grid configurations as JSON objects, facilitating seamless collaboration among team members. The extension also offers customizable background colors for columns, gutters, and margins, as well as optional offsets to align grids within complex layouts such as style guides with sidebars. CSS Grid Overlay streamlines responsive design validation and ensures pixel-perfect grid implementation.

Extension Developer Tools Design Productivity

By:

http://imagentleman.github.io/

Users:

10,000

Rating:

4.00

(8)

Version:

11 Last updated: 2025-01-30

Creation date:

2020-02-02

Risk:

Permissions:

scripting
activeTab
storage

Size:

183.00KB

Email:

im*****@gmail.com

URLs:

Website

Full description:

Source:

Chrome Web Store

Data ingested on:

2025-07-11

Ranking

# 9,040 ▲ 72

Other rankings

#1675 in Developer Tools ▼ 2 #3 in grid keyword 25 #5 in overlay keyword 28 ▼ 1 #20 in column keyword 14 ▼ 1

User reviews

The grid does not respect 1440 max-width.

Ro*****, 2025-06-29

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.

Ke*****, 2024-02-05

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. ❤️️

Ma*****, 2021-10-01

View all user reviews ›

Extension safety

Risk impact

Risk impact measures the level of extra permissions an extension has access to. A low risk impact extension cannot do much harms, whereas a high risk impact extension can do a lot of damage like stealing your password, bypassing your security settings, and accessing your personal data. High risk impact extensions are not necessarily malicious. However, if they do turn malicious, they can be very harmful.

CSS Grid Overlay does not require any sensitive permissions.

Risk impact analysis details

Risk likelihood

Risk likelihood measures the probability that a Chrome extension may turn malicious. This is determined by the publisher and the Chrome extension reputation on Chrome Web Store, the amount of time the Chrome extension has been around, and other signals about the Chrome extension. Our algorithms are not perfect, and are subject to change as we discover new ways to detect malicious extensions. We recommend that you always exercise caution when installing a Chrome extension.

CSS Grid Overlay has earned a good reputation and can be trusted.

Risk likelihood analysis details

High This extension has low user count. Unpopular extensions may not be stable or safe.
Low **** ********* *** ******* **** **** * ****** **** ***** ******** *** **** ****** ** ** ****** *** *****
Low **** ********* *** ***** **** **** * ****** **** ***** ********** *** **** ****** ** ** ****** *** *****
Good **** ********* ** ****** ** ********
Good **** ********* *** **** **** *******