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 |
| 官方網址 | 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"
} | |
