Gerador CSS Grid
O gerador de CSS Grid cria layouts em grade a partir do número de colunas e linhas, gaps, valores grid-template personalizados opcionais e alinhamento dos itens, com prévia ao vivo e CSS pronto para copiar.
Sobre esta ferramenta
O gerador de CSS Grid cria layouts em grade a partir do número de colunas e linhas, gaps, valores grid-template personalizados opcionais e alinhamento dos itens, com prévia ao vivo e CSS pronto para copiar.
Como usar
- Defina o número de colunas e linhas.
- Ajuste o espaçamento entre colunas e entre linhas.
- Se quiser, digite templates personalizados como 200px 1fr 1fr.
- Escolha justify-items e align-items e clique em Copiar CSS.
Bom saber
- A unidade fr divide o espaço livre: 1fr 2fr deixa a segunda coluna com o dobro da largura da primeira.
- repeat(3, 1fr) é a forma abreviada de três colunas iguais.
- column-gap e row-gap definem os espaçamentos entre as trilhas.
- O Grid é bidimensional e controla linhas e colunas ao mesmo tempo.
- repeat(auto-fit, minmax(200px, 1fr)) cria um grid responsivo sem media queries.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como criar um grid de 3 colunas em CSS?
Use display: grid; grid-template-columns: repeat(3, 1fr); no contêiner e adicione um gap para o espaçamento.
O que significa fr no CSS Grid?
fr é uma fração do espaço livre disponível no contêiner do grid.
CSS Grid ou Flexbox?
O Grid é melhor para layouts bidimensionais, como estruturas de página e grades de cards; o Flexbox, para linhas ou colunas unidimensionais.
Como fazer um grid responsivo sem media queries?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); assim as colunas se reorganizam automaticamente conforme o espaço disponível.