UTILS.
100% no navegador

Gerador de CSS Grid

Gere um layout de CSS grid com colunas, linhas e gap ajustáveis, com prévia ao vivo.

Sobre esta ferramenta

Defina o número de colunas e linhas mais o gap para montar um CSS grid e copie o código, tudo no seu navegador.

Perguntas frequentes

Como as faixas são dimensionadas?
Colunas e linhas usam repeat() com 1fr para dividir o espaço disponível de forma uniforme.
O que é o controle de gap?
Ele define o espaçamento do grid em pixels entre cada célula, aplicado ao vivo na prévia.

Mais ferramentas