Gerador de CSS Grid
Criador visual de layouts CSS Grid com geração de código
Configurações do layout
Layouts predefinidos
Posicionamento por item
Selecione um item na prévia ou na lista para editar suas propriedades.
Referência rápida de CSS Grid
Faixas da grade
Use unidades fr para faixas flexíveis, px/% para faixas fixas e auto para faixas dimensionadas pelo conteúdo.
Função repeat()
repeat(3, 1fr) é a forma abreviada de 1fr 1fr 1fr. Use auto-fill ou auto-fit para grades responsivas.
Itens que abrangem várias faixas
Use span N para abranger N faixas, ou 1 / -1 para abranger todas as colunas/linhas.
Prévia em tempo real
Os rótulos das linhas mostram as primeiras 200 faixas. Seu CSS e layout completos são mantidos.
CSS gerado
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Altere as configurações ou selecione um item. A prévia e o CSS são atualizados juntos.
Sobre o gerador de CSS Grid
O gerador de CSS Grid é uma ferramenta visual e interativa para projetar e gerar layouts com CSS Grid. O CSS Grid Layout é o sistema de layout bidimensional mais poderoso disponível no CSS e permite definir colunas e linhas ao mesmo tempo. Esta ferramenta oferece uma abordagem prática para aprender, experimentar e gerar código CSS Grid pronto para produção.
Principais recursos
- Controle total de grid-template-columns e grid-template-rows com entrada livre
- Botões rápidos de colunas e linhas para prototipagem veloz com trilhas iguais
- Controles deslizantes independentes de row-gap e column-gap para um controle preciso do espaçamento
- Controles de alinhamento justify-items e align-items
- Posicionamento de grid-column e grid-row por item, com botões de valores rápidos
- Rótulos personalizados para os itens da grade, para visualizar regiões semânticas do layout
- Itens numerados em cores pastel, com indicadores dos números das linhas da grade
- Layouts predefinidos: Layout de blog, Painel, Galeria de fotos e Landing page
- Código CSS gerado automaticamente, com cópia em um clique
- Suporte completo ao modo escuro
Entendendo o CSS Grid
O CSS Grid funciona definindo um contêiner de grade com trilhas (colunas e linhas) explícitas ou implícitas. Os itens colocados dentro do contêiner são posicionados automaticamente nas células, ou você pode posicioná-los explicitamente com as propriedades grid-column e grid-row para ocupar várias trilhas. A unidade fr representa uma fração do espaço disponível, o que simplifica os layouts responsivos. A função repeat() simplifica definições repetitivas de trilhas, e funções como minmax() e auto-fill/auto-fit permitem grades realmente responsivas sem media queries.
Padrões comuns de layout com CSS Grid
O CSS Grid é ideal para layouts em nível de página, como designs de blog com regiões de cabeçalho, barra lateral, conteúdo e rodapé; interfaces de painel com navegação, conteúdo principal e áreas de widgets; galerias de fotos com itens que ocupam várias linhas e colunas para um efeito semelhante ao masonry; e landing pages com seções de destaque em largura total, grades de recursos em várias colunas e áreas de chamada para ação. Use os botões de predefinições para explorar esses padrões na hora.
Grid x Flexbox
Enquanto o Flexbox foi projetado para layouts unidimensionais (uma única linha ou coluna), o CSS Grid se destaca em layouts bidimensionais, nos quais você precisa controlar os dois eixos ao mesmo tempo. O Grid é melhor para layouts de página e arranjos complexos de componentes, enquanto o Flexbox é ideal para distribuir espaço entre itens em uma única linha. Muitos designs modernos usam os dois juntos, com o Grid para a estrutura geral da página e o Flexbox para o alinhamento no nível dos componentes.
Para quem é esta ferramenta?
- Desenvolvedores web que criam layouts de página com CSS Grid
- Engenheiros de frontend que prototipam sistemas de grade responsivos
- Designers de UI/UX que visualizam estruturas de grade antes da implementação
- Estudantes que aprendem técnicas de layout CSS bidimensional
- Educadores que ensinam conceitos de CSS Grid em workshops ou aulas
- Qualquer pessoa que precise gerar rapidamente código CSS Grid para seus projetos web