Gerador CSS Grid
Gerador de layout CSS Grid gratuito online, editor visual
Noções básicas de CSS Grid Layout
CSS Grid é um sistema de layout bidimensional para organizar elementos em linhas e colunas. Propriedades principais: grid-template-columns define faixas de colunas, grid-template-rows define faixas de linhas, gap controla espaçamento e grid-area posiciona itens. Grid é excelente para layouts de nível de página.
Como usar o gerador de Grid
Defina o número de colunas e linhas. A pré-visualização mostra o layout da grade. Ajuste tamanhos e espaçamentos. Copie o código CSS gerado para seu projeto.
▶Quando devo usar Grid vs Flexbox?
Use Grid para layouts bidimensionais (linhas E colunas simultaneamente). Use Flexbox para layouts unidimensionais (ou uma linha OU uma coluna). Grid é melhor para layouts de página; Flexbox é melhor para layouts de componentes.
▶O que é a unidade fr no CSS Grid?
fr (fração) é uma unidade flexível que distribui espaço restante. grid-template-columns: 1fr 2fr dá à segunda coluna o dobro do espaço da primeira. É similar ao flex-grow no Flexbox.
▶Itens Grid podem ocupar múltiplas células?
Sim. Use grid-column: span 2 ou grid-row: span 2 para fazer um item ocupar múltiplas colunas ou linhas. Você também pode usar áreas de grid nomeadas para layouts complexos.