Gerador Visual de CSS Grid

Crie layouts CSS Grid interativamente com preview em tempo real e exporte o codigo

Presets

Container

grid-template-columns

grid-template-rows

Numero de itens

gap

column-gap

row-gap

justify-items

align-items

justify-content

align-content

Template Areas

Breakpoints (@media)

Preview — clique em um item para editar

Sobre CSS Grid

CSS Grid Layout e um sistema de layout bidimensional nativo do CSS que permite posicionar elementos em linhas e colunas simultaneamente, tornando-o ideal para layouts de pagina complexos.

Propriedades principais do container: grid-template-columns, grid-template-rows, grid-template-areas, gap, justify-items, align-items, justify-content e align-content.

Propriedades dos itens: grid-column e grid-row definem onde o item comeca e termina. Use span N para ocupar N trilhas. justify-self e align-self controlam o alinhamento individual.

Unidade fr: representa uma fracao do espaco disponivel no container. Por exemplo, 1fr 2fr divide o espaco em 3 partes, atribuindo 1 para a primeira coluna e 2 para a segunda.