Una fracción del espacio libre restante. 'repeat(3, 1fr)' divide el contenedor en tres columnas iguales. Mezcla con tamaños fijos: '200px 1fr' da un sidebar de 200px y un área principal flexible.

¿auto-fit o auto-fill?

Ambos crean cuantas pistas quepan. auto-fit colapsa las vacías; auto-fill las deja. Para grids de tarjetas responsivos suele querer auto-fit.

¿Por qué no se alinea como esperaba?

justify-items / align-items alinean el contenido de cada celda. Para alinear el grid completo, usa justify-content / align-content (aún no en esta tool).

¿Puedo nombrar líneas o áreas?

Sí en CSS real, pero el playground se queda con las propiedades visuales más comunes. named lines / grid-template-areas son potentes pero difíciles de demostrar con una vista previa genérica.

Playground de CSS Grid

Edita grid-template-columns y rows directamente o elige presets comunes (3 cols, sidebar, holy grail, tarjetas auto-fit). Ajusta gap, justify-items y align-items con chips; cambia cuántos ítems se muestran. La vista previa refleja todo en vivo y el CSS se pega tal cual. Compañero del Playground Flexbox para la otra mitad del layout CSS.

—

Plantillas

Pulsa un preset para cargarlo en los campos de columna / fila.

grid-template-columnsgrid-template-rows

gap (px)Ítems

justify-items

align-items

Vista previa

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

Cómo usar

Elige un preset o escribe tus propios valores de grid-template.
Configura el gap y cuántos ítems mostrar.
Ajusta justify-items / align-items con las chips.
Copia el CSS para tu proyecto.

Preguntas frecuentes

¿Qué es fr?: Una fracción del espacio libre restante. 'repeat(3, 1fr)' divide el contenedor en tres columnas iguales. Mezcla con tamaños fijos: '200px 1fr' da un sidebar de 200px y un área principal flexible.
¿auto-fit o auto-fill?: Ambos crean cuantas pistas quepan. auto-fit colapsa las vacías; auto-fill las deja. Para grids de tarjetas responsivos suele querer auto-fit.
¿Por qué no se alinea como esperaba?: justify-items / align-items alinean el contenido de cada celda. Para alinear el grid completo, usa justify-content / align-content (aún no en esta tool).
¿Puedo nombrar líneas o áreas?: Sí en CSS real, pero el playground se queda con las propiedades visuales más comunes. named lines / grid-template-areas son potentes pero difíciles de demostrar con una vista previa genérica.

Herramientas relacionadas

Playground de CSS Flexbox

Elige visualmente flex-direction, justify-content, align-items y gap — copia el CSS o la clase Tailwind.

Desarrollo 0 0

Playground de Filtros CSS

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Color 0 0

Generador de Animación CSS

Construye una animación CSS visualmente — elige preset, ajusta duración/easing/iteración, mira el preview y copia los keyframes.

Desarrollo 0 0

Calculadora CSS clamp() (Tipografía Fluida)

Construye un `font-size: clamp(...)` fluido que escala entre dos anchos de viewport — copia una línea.

Color 0 0

Generador de CSS clip-path (polígono, círculo)

Generador visual de la propiedad CSS `clip-path` — elige una forma (círculo, elipse, inset o polígono), ajusta números con sliders o haz clic en la vista previa para añadir puntos del polígono, y copia una declaración CSS lista para pegar. Incluye 10 presets (triángulo, hexágono, estrella, flecha, bocadillo, plus, …).

Color 0 0

Constructor de Expresiones Cron

Construye una expresión cron con clics — cada hora, día, semana, mes o totalmente custom — compañero del Cron Explainer.

Desarrollo 0 0