CSS Grid Overlay
![featured Icon](/_next/image?url=%2Fstatic%2Fimg%2Ffeatured%20ext%20icon%20crx%20insider.png&w=48&q=75)
Featured
Easily check the grid alignment of your page across breakpoints.
Overview
What is CSS Grid Overlay?
Easily check the grid alignment of your page across breakpoints..
SCREENSHOT
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 // "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)" // } } ]
See More
Stats
Trends for CSS Grid Overlay:
Rank
User count
Category Rank
Rating
Download
HOW TO INSTALL CSS Grid Overlay FROM A CRX FILE
- Download CSS Grid Overlay CRX file
- NOTE: Sometimes the browser may block downloading / installing CRX file from outside the Chrome Web Store. If so, you may need to download the ZIP file instead
- In the URL bar, go to chrome://extensions
- Enable Developer mode
Ratings
USER REVIEWS (0)
No reviews