Was ist CSS Grid Overlay?

CSS Grid Overlay ist eine Chrome-Erweiterung, die von https://imagentleman.github.io entwickelt wurde, und ihr Hauptmerkmal ist "Easily check the grid alignment of your page across breakpoints.".

Erweiterungsscreenshots

CSS Grid Overlay-Erweiterungs-CRX-Datei herunterladen

Laden Sie CSS Grid Overlay-Erweiterungsdateien im crx-Format herunter, installieren Sie Chrome-Erweiterungen manuell im Browser oder teilen Sie die crx-Dateien mit Freunden, um Chrome-Erweiterungen einfach zu installieren.

Anleitung zur Verwendung der Erweiterung

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

Grundlegende Informationen zur Erweiterung

Name	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
Offizielle URL	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Beschreibung	Easily check the grid alignment of your page across breakpoints.
Dateigröße	181 KB
Installationsanzahl	15,069
Aktuelle Version	10
Letztes Update	2022-04-06
Veröffentlichungsdatum	2020-02-02
Bewertung	4.43/5 Insgesamt 7 Bewertungen
Entwickler	https://imagentleman.github.io
E-Mail	[email protected]
Zahlungsart	free
Erweiterungswebsite	https://imagentleman.github.io
Hilfeseite URL	https://github.com/imagentleman/css-grid-overlay
Unterstützte Sprachen	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" }