O que é CSS Grid?
CSS Grid Layout é um sistema de layout bidimensional que permite criar designs complexos baseados em grade com linhas e colunas. Diferente do Flexbox que lida com uma dimensão por vez, o Grid oferece controle total sobre o posicionamento horizontal e vertical dos elementos.
Como Usar Este Gerador
- Defina o número de colunas e linhas para seu layout de grade.
- Ajuste o valor do gap para controlar o espaçamento entre as células da grade.
- A pré-visualização é atualizada em tempo real para mostrar seu layout de grade.
- Copie o código CSS gerado para a folha de estilos do seu projeto.
Perguntas Frequentes
O que significa 1fr?
A unidade fr representa uma fração do espaço disponível no container da grade. repeat(3, 1fr) cria três colunas de largura igual que compartilham o espaço uniformemente.
Posso misturar colunas fixas e flexíveis?
Sim. Você pode combinar unidades fr com tamanhos fixos como 200px 1fr 1fr para criar um layout com barra lateral e áreas de conteúdo principal flexíveis.