Vad är CSS Grid Overlay?

CSS Grid Overlay är en Chrome-tillägg utvecklad av https://imagentleman.github.io, och dess huvudfunktion är "Easily check the grid alignment of your page across breakpoints.".

Tilläggsskärmbilder

Ladda ner CSS Grid Overlay-förlängningens CRX-fil

Ladda ner CSS Grid Overlay-filändelser i crx-format, installera Chrome-tillägg manuellt i webbläsaren eller dela crx-filerna med vänner för att enkelt installera Chrome-tillägg.

Användarmanual för Tillägg

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äggande Information om Tillägg

Namn	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
Officiell webbadress	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Beskrivning	Easily check the grid alignment of your page across breakpoints.
Filstorlek	181 KB
Antal Installationer	15,069
Aktuell Version	10
Senast Uppdaterad	2022-04-06
Publiceringsdatum	2020-02-02
Betyg	4.43/5 Totalt 7 Betyg
Utvecklare	https://imagentleman.github.io
E-post	[email protected]
Betalningssätt	free
Tilläggswebbplats	https://imagentleman.github.io
Hjälpsida URL	https://github.com/imagentleman/css-grid-overlay
Stödda Språk	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" }