AZ Tools

Playground de CSS Grid

Desarrollo

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.

justify-items
align-items
Vista previa
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

Cómo usar

  1. Elige un preset o escribe tus propios valores de grid-template.
  2. Configura el gap y cuántos ítems mostrar.
  3. Ajusta justify-items / align-items con las chips.
  4. 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

Decodificador JWT

Decodifica un JSON Web Token para ver su cabecera, claims y expiración.

Desarrollo00

Generador de UUID

Genera UUID v4 aleatorios en lote, con copia.

Desarrollo00

Generador de Hash (SHA)

Genera hashes SHA-1, SHA-256, SHA-384 y SHA-512 a partir de texto.

Desarrollo00

Codificador / Decodificador de URL

Codifica texto para URLs en porcentaje, o decodifica URLs a texto.

Desarrollo00

Codificador / Decodificador Base64

Codifica texto a Base64 o decodifica Base64 a texto al instante.

Desarrollo00

Formateador y Validador de JSON

Formatea, embellece, minifica y valida JSON en tu navegador.

Desarrollo00