CSS Grid Generator

Create custom CSS Grid layouts with visual preview and ready-to-use code

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)

Ferramentas Relacionadas

Flexbox Playground

Visualize and learn CSS Flexbox interactively

CSS Animation Generator

Create CSS animations with keyframes and real-time preview