Playground visual de CSS Grid con preview en vivo y CSS generado
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 8px;
justify-items: stretch;
align-items: stretch;
}También podrías necesitar
CSS Grid Layout es el sistema de layout bidimensional más potente de CSS: permite definir filas y columnas simultáneamente y ubicar elementos en cualquier celda de la cuadrícula. Es ideal para layouts de página completos, galleries, dashboards y cualquier diseño que requiera alineación en dos ejes. Esta herramienta te permite experimentar con las propiedades fundamentales de Grid: grid-template-columns usando repeat() con fr units (fracciones del espacio disponible, la unidad estándar en Grid), grid-template-rows, gap para controlar el espacio entre celdas, y las propiedades de alineación justify-items y align-items. La preview muestra celdas coloreadas numeradas que se redistribuyen en tiempo real al cambiar los parámetros, haciendo inmediatamente visible cómo Grid organiza el contenido en la cuadrícula. El CSS generado usa las convenciones modernas: repeat() con fr units en lugar de porcentajes, gap en lugar del depreciado grid-gap.
¿Qué son las fr units y por qué son mejores que porcentajes?
fr (fracción) representa una fracción del espacio disponible en el grid container. Con 3 columnas de 1fr cada una, cada columna obtiene exactamente 1/3 del espacio libre — automáticamente. Con porcentajes debes calcular y mantener que la suma sea 100%, y además el gap consume espacio adicional rompiendo el cálculo. fr abstrae completamente el espacio del gap: 1fr siempre es 'una porción igual del espacio libre después de los gaps', sin cálculos manuales.
¿Cuál es la diferencia entre justify-items y justify-content en Grid?
justify-items controla cómo se alinea el contenido dentro de cada celda individual en el eje de fila (horizontal). justify-content controla cómo se distribuye el grid completo dentro del container cuando el grid ocupa menos espacio que el container. En la mayoría de casos con columnas fr (que usan todo el espacio disponible), justify-content no tiene efecto visible porque el grid siempre llena el container.
¿Cuándo usar Grid vs Flexbox?
CSS Grid es bidimensional — controla filas y columnas simultáneamente. Ideal para: layouts de página completos, galleries de imágenes, dashboards con múltiples secciones, formularios con múltiples columnas. CSS Flexbox es unidimensional — controla una fila o una columna a la vez. Ideal para: navigation bars, groups de botones, cards en una fila, distribución de elementos dentro de un componente. La regla práctica: si piensas en 'filas Y columnas', usa Grid; si piensas en 'una fila de elementos', usa Flexbox.
¿El gap también aplica a las filas?
Sí. La propiedad gap en Grid es un shorthand para row-gap y column-gap. Un solo valor aplica el mismo espacio entre filas y entre columnas. Puedes usar gap: 16px 8px para 16px entre filas y 8px entre columnas. La propiedad gap (sin el prefijo grid-) está soportada en todos los navegadores modernos tanto para Grid como para Flexbox.
¿Cómo hago que un elemento ocupe múltiples celdas?
Con grid-column y grid-row en el elemento hijo: grid-column: 1 / 3 hace que el elemento ocupe desde la línea 1 hasta la 3 (dos celdas horizontales). grid-column: span 2 es equivalente pero más legible. Para ocupar toda la fila: grid-column: 1 / -1. Esta herramienta muestra el layout base; para ubicación específica de elementos, añade las propiedades grid-column y grid-row directamente en tus selectores hijos.