Easily check the grid alignment of your page across breakpoints.
CSS Grid Overlay Extension
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)\"
// }
}
]
Source Manifest.json
Similar Extensions
Grid Builder 10,000+ 11 ★ 43.28KiB
Foundation Overlay 10,000+ 12 ★ 9.14KiB
Muzli - Design inspiration hub 10,000+ 728 ★ 3.51MiB
Responsive Viewer 10,000+ 298 ★ 639KiB
NOV Grid - Responsive grid overlay 10,000+ 2 ★ 24.98KiB
gridView 10,000+ 5 ★ 90.28KiB
Grid System 10,000+ 7 ★ 938KiB
Bootstrap Grid for any Website 10,000+ 7 ★ 42.21KiB
Grrrid 10,000+ 20 ★ 138KiB
CSS Peeper 10,000+ 363 ★ 279KiB
Grid Ruler 10,000+ 335 ★ 288KiB
Layout Grid for browser 10,000+ 1 ★ 952KiB
Dimensions 10,000+ 454 ★ 17.28KiB
Site Palette 10,000+ 344 ★ 297KiB
UX Check 10,000+ 84 ★ 1.32MiB
Page Ruler 10,000+ 83 ★ 256KiB
VisBug 10,000+ 252 ★ 5.38MiB
Baseliner 10,000+ 45 ★ 205KiB
axe DevTools - Web Accessibility Testing 10,000+ 114 ★ 2.89MiB
CSSViewer 10,000+ 371 ★ 301KiB
HTML to Figma - by Builder.io 10,000+ 46 ★ 343KiB
html.to.design 10,000+ 72 ★ 333KiB
Dimensions Inspect | Gridman 10,000+ 87 ★ 816KiB
Designer Tools 10,000+ 227 ★ 987KiB
User reviews
Marcin Gościcki (ID: 000000429c525be2) Voted 5 ★ - Updated 10/01/2021
M S (ID: 0000003858898b90) Voted 5 ★ - Updated 04/05/2021