Generador de CSS Grid

Crea diseños CSS Grid personalizados con vista previa visual y código listo

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)

Sigue explorando

Herramientas que combinan con lo que estás usando:

Flexbox Playground

Visualiza y aprende CSS Flexbox de forma interactiva

Generador de Animación CSS

Crea animaciones CSS con keyframes y vista previa en tiempo real

Ver todas las herramientas

¿Te gustó esta herramienta? ¡Explora más!

Explorar todas las herramientas