CSS Grid Overlay

Easily check the grid alignment of your page across breakpoints.

¿Qué es CSS Grid Overlay?

CSS Grid Overlay es una extensión de Chrome desarrollada por https://imagentleman.github.io, y su función principal es "Easily check the grid alignment of your page across breakpoints.".

Capturas de Pantalla de la Extensión

screenshot

Descargar Archivo CRX de la Extensión CSS Grid Overlay

Descarga archivos de extensión CSS Grid Overlay en formato crx, instala manualmente las extensiones de Chrome en el navegador o comparte los archivos crx con amigos para instalar fácilmente las extensiones de Chrome.

Instrucciones de Uso de la Extensión

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

Información Básica de la Extensión

Nombre CSS Grid Overlay CSS Grid Overlay
ID hajfilceeneohkmcakehndmaeonhlack
URL Oficial https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Descripción Easily check the grid alignment of your page across breakpoints.
Tamaño del Archivo 181 KB
Cantidad de Instalaciones 15,069
Versión Actual 10
Última Actualización 2022-04-06
Fecha de Publicación 2020-02-02
Calificación 4.43/5 Total de 7 Calificaciones
Desarrollador https://imagentleman.github.io
Correo electrónico [email protected]
Tipo de Pago free
Sitio Web de la Extensión https://imagentleman.github.io
URL de la Página de Ayuda https://github.com/imagentleman/css-grid-overlay
Idiomas Soportados en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 3,
    "name": "CSS Grid Overlay",
    "version": "10",
    "description": "Easily check the grid alignment of your page across breakpoints.",
    "icons": {
        "16": "16.png",
        "48": "48.png",
        "128": "128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": {
            "16": "off-16.png",
            "24": "off-24.png",
            "32": "off-32.png"
        }
    },
    "permissions": [
        "scripting",
        "activeTab",
        "storage"
    ],
    "minimum_chrome_version": "88",
    "options_page": "options.html"
}