Item logo image for CSS Grid Overlay

CSS Grid Overlay

imagentleman.github.io
Featured
4.4(

7 ratings

)
Item media 1 screenshot

Overview

Easily check the grid alignment of your page across breakpoints.

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

4.4 out of 57 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Kenny McNettFeb 5, 2024

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.

1 person found this review to be helpful
Review's profile picture

Marcin GościckiOct 1, 2021

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

2 out of 3 found this helpful
Review's profile picture

M SApr 5, 2021

great doing what it is supposed to do, very useful tool

2 out of 6 found this helpful

Details

  • Version
    10
  • Updated
    April 6, 2022
  • Size
    181KiB
  • Languages
    English
  • Developer
    Website
    Email
    imagentlemail@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

Grrrid

3.8(21)

A very simple grid system overlay pluggin.

CSS Peeper

4.6(355)

Extract CSS and build beautiful styleguides.

Grid Ruler

3.7(331)

Create grids and measure their distance easily.

Dimensions Inspect | Gridman

4.0(85)

Swiss army knife for front-end developers

Grid Builder

3.5(11)

Grid Builder extension applies a grid to current web page.

Foundation Overlay

4.5(12)

This extension creates an overlay for the Foundation grid system

Muzli - Design inspiration hub

4.5(714)

Your daily dose of design with industry news, tools, and inspiration - all in one place.

Responsive Viewer

4.3(285)

Show multiple screens once, Responsive design tester

NOV Grid - Responsive grid overlay

5.0(2)

Responsive grid overlay created by dennissnov help you to get pixel perfect. can be customized and support grid based design system

gridView

3.4(5)

A simple tool for web designers/developers to see the grid on any website with custom columns, colors and more.

Grid System

5.0(6)

Grid System is a simple, beautiful and interactive grid generator.

Bootstrap Grid for any Website

4.7(7)

Quickly toggle a Bootstrap Grid for any website. Easy to use, easy success.

Grrrid

3.8(21)

A very simple grid system overlay pluggin.

CSS Peeper

4.6(355)

Extract CSS and build beautiful styleguides.

Grid Ruler

3.7(331)

Create grids and measure their distance easily.

Dimensions Inspect | Gridman

4.0(85)

Swiss army knife for front-end developers

Grid Builder

3.5(11)

Grid Builder extension applies a grid to current web page.

Foundation Overlay

4.5(12)

This extension creates an overlay for the Foundation grid system

Muzli - Design inspiration hub

4.5(714)

Your daily dose of design with industry news, tools, and inspiration - all in one place.

Responsive Viewer

4.3(285)

Show multiple screens once, Responsive design tester

Google apps