Pular para o conteúdo

Gerador Grid CSS

Crie layouts CSS Grid visualmente. Defina colunas, linhas, espaçamentos e templates. Copie o código CSS. Grátis, 100% no seu navegador.

Visualização

Saída CSS
 

O que é CSS Grid?

CSS Grid é um sistema de layout bidimensional que permite organizar conteúdo em linhas e colunas simultaneamente. É ideal para layouts de página complexos e grades de componentes.

Templates Grid

grid-template-columns e grid-template-rows definem a estrutura da grade. Use valores fixos (200px), frações flexíveis (1fr) ou a função repeat() para padrões repetitivos. auto ajusta o tamanho automaticamente ao conteúdo.

Privacidade

Todo o processamento é executado 100% no seu navegador. Nenhum dado é enviado a servidores.