ما هو CSS Grid Overlay؟

CSS Grid Overlay هو إضافة Chrome تم تطويرها بواسطة https://imagentleman.github.io، والميزة الرئيسية لها هي "Easily check the grid alignment of your page across breakpoints.".

لقطات شاشة التمديد

تحميل ملف CRX للإضافة CSS Grid Overlay

قم بتنزيل ملفات الامتداد CSS Grid Overlay بتنسيق crx ، وقم بتثبيت الامتدادات يدويًا في متصفح Chrome ، أو شارك ملفات crx مع الأصدقاء لتثبيت الامتدادات بسهولة.

تعليمات استخدام التمديد

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

معلومات أساسية عن التمديد

الاسم	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
عنوان URL الرسمي	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
الوصف	Easily check the grid alignment of your page across breakpoints.
حجم الملف	181 KB
عدد التثبيتات	15,069
النسخة الحالية	10
آخر تحديث	2022-04-06
تاريخ النشر	2020-02-02
تقييم	4.43/5 مجموع تقييمات 7
المطور	https://imagentleman.github.io
البريد الإلكتروني	[email protected]
نوع الدفع	free
موقع الإضافة	https://imagentleman.github.io
عنوان صفحة المساعدة	https://github.com/imagentleman/css-grid-overlay
اللغات المدعومة	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" }