Gerador de CSS Grid

Crie layouts CSS Grid personalizados com preview visual e código pronto

Colunas

Linhas

Grid Template Columns

Grid Template Rows

Column Gap (px)

Row Gap (px)

Justify Items

Align Items

Número de Itens

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px 10px;
  justify-items: stretch;
  align-items: stretch;
}

Propriedades do Container

display: grid

grid-template-columns: repeat(3, 1fr)

grid-template-rows: repeat(2, 1fr)

gap: 10px 10px

justify-items: stretch

align-items: stretch

Exemplos Úteis

Layout responsivo: repeat(auto-fit, minmax(200px, 1fr))

Colunas específicas: 200px 1fr 2fr

Linhas automáticas: repeat(auto-fill, 100px)

Continue explorando

Ferramentas que combinam com o que você está usando:

Flexbox Playground

Visualize e aprenda CSS Flexbox de forma interativa

Gerador de Animação CSS

Crie animações CSS com keyframes e preview em tempo real

Ver todas as ferramentas

Gostou desta ferramenta? Explore mais!

Explorar todas as ferramentas