WebExtension.net
WebExtension.net

CSS Grid Overlay

View on Chrome Web Store
View CSS Grid Overlay Chrome Extension on Chrome Web Store
4.4 (7 ratings)

Data is synced from the Chrome Web Store. View the official store page for the most current information.

Easily check the grid alignment of your page across breakpoints.
Type
Extension
Users
10,000 users
imagentleman (José Antonio Chio)
View author page of imagentleman (José Antonio Chio)
Featured Extension

Hand-picked for quality and usefulness

Published
Published on May 28, 2018
Version 10
Manifest version
3
Updated
Updated on April 6, 2022
View on Chrome Web Store
View CSS Grid Overlay Chrome Extension on Chrome Web Store
productivity/developer
Extension Category
Website
Visit developer website
CSS Grid Overlay Chrome Extension Image 1

Description

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)" // } } ]

WebExtension.net

Track and analyze Chrome Web Store extensions with comprehensive analytics and insights.

© 2024 WebExtension.net. All rights reserved.
Disclaimer: WebExtension.net is not affiliated with Google or the Chrome Web Store. All product names, logos, and brands are property of their respective owners. All extension data is collected from publicly available sources.
Go to top