Cos'è CSS Grid Overlay?

CSS Grid Overlay è un'estensione di Chrome sviluppata da https://imagentleman.github.io, e la sua funzione principale è "Easily check the grid alignment of your page across breakpoints.".

Screenshot dell'Estensione

Scarica il file CRX dell'estensione CSS Grid Overlay

Scarica i file di estensione CSS Grid Overlay in formato crx, installa manualmente le estensioni di Chrome nel browser o condividi i file crx con gli amici per installare facilmente le estensioni di Chrome.

Istruzioni per l'Uso dell'Estensione

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

Informazioni di Base sull'Estensione

Nome	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
URL Ufficiale	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Descrizione	Easily check the grid alignment of your page across breakpoints.
Dimensione del File	181 KB
Conteggio Installazioni	15,069
Versione Corrente	10
Ultimo Aggiornamento	2022-04-06
Data di Pubblicazione	2020-02-02
Valutazione	4.43/5 Totale 7 Valutazioni
Sviluppatore	https://imagentleman.github.io
Email	[email protected]
Tipo di Pagamento	free
Sito Web dell'Estensione	https://imagentleman.github.io
URL della Pagina di Aiuto	https://github.com/imagentleman/css-grid-overlay
Lingue Supportate	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" }