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
Eメール	[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" }