Qu'est-ce que CSS Grid Overlay ?

CSS Grid Overlay est une extension Chrome développée par https://imagentleman.github.io, et sa fonction principale est "Easily check the grid alignment of your page across breakpoints.".

Captures d'Écran de l'Extension

Télécharger le fichier CRX de l'extension CSS Grid Overlay

Téléchargez les fichiers d'extension CSS Grid Overlay au format crx, installez manuellement les extensions Chrome dans le navigateur ou partagez les fichiers crx avec des amis pour installer facilement les extensions Chrome.

Instructions d'Utilisation de l'Extension

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

Informations de Base sur l'Extension

Nom	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
URL Officiel	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Description	Easily check the grid alignment of your page across breakpoints.
Taille du Fichier	181 KB
Nombre d'Installations	15,069
Version Actuelle	10
Dernière Mise à Jour	2022-04-06
Date de Publication	2020-02-02
Évaluation	4.43/5 Total 7 Évaluations
Développeur	https://imagentleman.github.io
Email	[email protected]
Type de Paiement	free
Site Web de l'Extension	https://imagentleman.github.io
URL de la Page d'Aide	https://github.com/imagentleman/css-grid-overlay
Langues Prises en Charge	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" }