Hvad er CSS Grid Overlay?

CSS Grid Overlay er en Chrome-udvidelse udviklet af https://imagentleman.github.io, og dens hovedfunktion er "Easily check the grid alignment of your page across breakpoints.".

Udvidelsesskærmbilleder

Download CSS Grid Overlay-udvidelses-CRX-fil

Download CSS Grid Overlay-udvidelsesfiler i crx-format, installer Chrome-udvidelser manuelt i browseren eller del crx-filer med venner for nemt at installere Chrome-udvidelser.

Brugsanvisning til Udvidelsen

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

Grundlæggende oplysninger om udvidelsen

Navn	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
Officiel URL	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Beskrivelse	Easily check the grid alignment of your page across breakpoints.
Filstørrelse	181 KB
Antal Installationer	15,069
Nuværende Version	10
Senest Opdateret	2022-04-06
Udgivelsesdato	2020-02-02
Bedømmelse	4.43/5 Samlet 7 Bedømmelser
Udvikler	https://imagentleman.github.io
E-mail	[email protected]
Betalingsmetode	free
Udvidelseswebsted	https://imagentleman.github.io
Hjælpeside-URL	https://github.com/imagentleman/css-grid-overlay
Understøttede Sprog	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" }