CSS Grid Overlay chrome extension

What is CSS Grid Overlay?

CSS Grid Overlay is a css extension for chrome. it's a free extension , it has 10,000+ active users since released its first version, it earns an average rating of 4.33 from 6 rated user, last update is 755 days ago.

What’s new in version 10?

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

How to install CSS Grid Overlay?

You could download the latest version crx file or older version files and install it.

Preview of CSS Grid Overlay

---

Reviews of css grid overlay:

---

Marcin Gościcki October 1st, 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. ❤️️

Read more review & comments of css grid overlay