Что такое 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" }