CSS Grid Overlay
Easily check the grid alignment of your page across breakpoints.
什么是CSS Grid Overlay？
CSS Grid Overlay是由https://imagentleman.github.io开发的Chrome扩展程序，该扩展的主要功能是“Easily check the grid alignment of your page across breakpoints.”。
扩展截图
下载CSS Grid Overlay扩展crx文件
下载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"
} | |
