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 กับเพื่อนๆ เพื่อติดตั้งส่วนขยาย Chrome อย่างง่ายดาย

คำแนะนำในการใช้ส่วนขยาย

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
URL หน้าช่วยเหลือ	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" }