O que é CSS Grid Overlay?

CSS Grid Overlay é uma extensão do Chrome desenvolvida por https://imagentleman.github.io, e sua principal característica é "Easily check the grid alignment of your page across breakpoints.".

Capturas de Tela da Extensão

Baixar o arquivo CRX da Extensão CSS Grid Overlay

Baixe arquivos de extensão CSS Grid Overlay no formato crx, instale manualmente as extensões do Chrome no navegador ou compartilhe os arquivos crx com amigos para instalar facilmente as extensões do Chrome.

Instruções de Uso da Extensão

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

Informações Básicas da Extensão

Nome	CSS Grid Overlay
ID	hajfilceeneohkmcakehndmaeonhlack
URL Oficial	https://chromewebstore.google.com/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Descrição	Easily check the grid alignment of your page across breakpoints.
Tamanho do Arquivo	181 KB
Contagem de Instalações	15,069
Versão Atual	10
Última Atualização	2022-04-06
Data de Publicação	2020-02-02
Classificação	4.43/5 Total de 7 Avaliações
Desenvolvedor	https://imagentleman.github.io
Email	[email protected]
Tipo de Pagamento	free
Site da Extensão	https://imagentleman.github.io
URL da Página de Ajuda	https://github.com/imagentleman/css-grid-overlay
Idiomas Suportados	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" }