Gerador de CSS Grid
Crie layouts em CSS Grid visualmente: defina linhas, colunas, gaps e justificações. Veja o preview e copie o CSS pronto. Tudo no navegador.
Preview
CSS Grid em 30 segundos
display: grid transforma o elemento em uma grade. grid-template-columns define a quantidade e largura das colunas (use 1fr para fração do espaço, auto para tamanho do conteúdo). gap espaça as células sem margens.
repeat(N, X) repete o padrão X N vezes. repeat(auto-fill, minmax(180px, 1fr)) cria quantas colunas couberem com largura mínima de 180px — perfeito para grids responsivos de cards. Tudo no navegador.
Ferramentas Relacionadas
Decodificador Pix
Decodifica BR Code Pix (texto começando com 0002...) extraindo chave, valor, beneficiário, cidade e identificador.
Buscador de Ícones
Busca ícones SVG da biblioteca Lucide (1300+ ícones) por nome. Copia o SVG ou o nome do componente.
Formatador .env
Formata arquivos .env: alfabetiza variáveis, agrupa por prefixo, escapa valores com aspas e remove duplicatas.