CSS Studio

Generador de CSS Grid

Construye diseños de grid responsivos con editor visual

Configuración

px
px
px
%

Plantilla Grid

1.
2.
3.
1.
2.

Valores comunes:

• 1fr - Una fracción del espacio disponible
• 200px - Tamaño fijo en píxeles
• auto - Tamaño automático basado en contenido
• minmax(100px, 1fr) - Dimensionado responsivo
• repeat(3, 1fr) - Patrón de repetición

Presets

Elementos Grid

Vista Previa

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Vista previa con configuración actual

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}