CSS Grid Overlay là gì?

CSS Grid Overlay là một tiện ích mở rộng Chrome được phát triển bởi https://imagentleman.github.io, và tính năng chính của nó là "Easily check the grid alignment of your page across breakpoints.".

Ảnh Chụp Màn Hình của Tiện Ích Mở Rộng

Tải xuống tệp CRX của tiện ích mở rộng CSS Grid Overlay

Tải xuống các tệp mở rộng CSS Grid Overlay dưới định dạng crx, cài đặt các tiện ích mở rộng Chrome bằng tay trong trình duyệt hoặc chia sẻ các tệp crx với bạn bè để dễ dàng cài đặt các tiện ích mở rộng Chrome.

Hướng Dẫn Sử Dụng Tiện Ích Mở Rộng

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

Thông Tin Cơ Bản về Tiện Ích Mở Rộng

Tên	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
URL Chính Thức	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Mô tả	Easily check the grid alignment of your page across breakpoints.
Kích Thước Tệp	181 KB
Số Lần Cài Đặt	15,069
Phiên Bản Hiện Tại	10
Cập Nhật Lần Cuối	2022-04-06
Ngày Phát Hành	2020-02-02
Đánh Giá	4.43/5 Tổng số 7 Đánh Giá
Nhà Phát Triển	https://imagentleman.github.io
Email	[email protected]
Loại Thanh Toán	free
Trang Web Mở Rộng	https://imagentleman.github.io
URL Trang Trợ Giúp	https://github.com/imagentleman/css-grid-overlay
Ngôn Ngữ Được Hỗ Trợ	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" }