Gerador de Grades CSS

CSS Grid Layout e um poderoso sistema de layout bidimensional que permite organizar elementos simultaneamente em linhas e colunas. Diferente do Flexbox que trata uma direcao por vez, o Grid oferece controle total sobre ambos os eixos. As propriedades principais incluem grid-template-columns para definir faixas de colunas, grid-template-rows para faixas de linhas, gap para espacamento e grid-area para posicionar itens dentro de regioes nomeadas.

Use o controle deslizante Colunas para definir o numero de colunas (1 a 12). Use o controle deslizante Linhas para o numero de linhas (1 a 12). Ajuste o controle Gap para controlar o espacamento entre celulas (0 a 32px). A area de pre-visualizacao mostra uma grade ao vivo com celulas numeradas. Quando estiver satisfeito, copie o codigo CSS gerado e cole no seu projeto.

grid-template-columns e grid-template-rows definem os tamanhos das faixas. A funcao repeat() cria faixas iguais, por exemplo repeat(3, 1fr) cria tres colunas iguais. A unidade fr distribui o espaco disponivel proporcionalmente. gap define o espacamento entre linhas e colunas. Se necessario, voce pode definir valores diferentes para row-gap e column-gap.

Layout Santo Graal: cabecalho de 3 colunas, conteudo principal com barra lateral. Cartoes de painel: repeat(auto-fill, minmax(250px, 1fr)) cria grades de cartoes responsivas. Hero de largura total com conteudo abaixo: uma coluna abrangendo todas as linhas. Layout revista: expansoes mistas com grid-column e grid-row para tamanhos de celula variados.

Use auto-fill ou auto-fit com minmax() para grades responsivas fluidas sem media queries. Combine com clamp() para tamanhos flexiveis. Defina uma largura minima com minmax(200px, 1fr) para que os itens nao encolham demais. Use media queries para alterar o numero de colunas nos breakpoints. Considere container queries para responsividade em nivel de componente.