Generador de CSS Grid

CSS Grid Layout es un potente sistema de layout bidimensional que permite organizar elementos simultaneamente en filas y columnas. A diferencia de Flexbox que maneja una direccion a la vez, Grid te da control total sobre ambos ejes. Las propiedades clave incluyen grid-template-columns para definir pistas de columnas, grid-template-rows para pistas de filas, gap para espaciado y grid-area para posicionar elementos dentro de regiones con nombre.

Usa el control deslizante Columnas para establecer el numero de columnas (1 a 12). Usa el control deslizante Filas para el numero de filas (1 a 12). Ajusta el control Gap para controlar el espaciado entre celdas (0 a 32px). El area de vista previa muestra una cuadricula en vivo con celdas numeradas. Una vez satisfecho, copia el codigo CSS generado y pegalo en tu proyecto.

grid-template-columns y grid-template-rows definen los tamanos de las pistas. La funcion repeat() crea pistas iguales, por ejemplo repeat(3, 1fr) crea tres columnas iguales. La unidad fr distribuye el espacio disponible proporcionalmente. gap establece el espaciado entre filas y columnas. Si es necesario, puedes establecer valores diferentes para row-gap y column-gap.

Layout Santo Grial: cabecera de 3 columnas, contenido principal con barra lateral. Tarjetas de dashboard: repeat(auto-fill, minmax(250px, 1fr)) crea cuadriculas de tarjetas responsive. Hero de ancho completo con contenido debajo: una columna que abarca todas las filas. Layout revista: combinacion de expansiones con grid-column y grid-row para tamanos de celda variados.

Usa auto-fill o auto-fit con minmax() para cuadriculas responsive fluidas sin media queries. Combina con clamp() para tamanios flexibles. Establece un ancho minimo con minmax(200px, 1fr) para que los elementos no se encojan demasiado. Usa media queries para cambiar el numero de columnas en los breakpoints. Considera container queries para responsividad a nivel de componente.