Generador de CSS Grid
Herramienta gratuita de generación de diseños con CSS Grid en línea, con editor visual
Que es CSS Grid Layout?
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.
Como usar el generador Grid
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.
Comprender las propiedades Grid
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.
Patrones comunes de Grid
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.
Consejos para cuadriculas responsive
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.
▶Cuando debo usar Grid vs Flexbox?
▶Que navegadores soportan CSS Grid?
▶Puedo anidar cuadriculas dentro de cuadriculas?
▶Como funcionan los gaps de la cuadricula?
▶Cual es la diferencia entre auto-fill y auto-fit?
▶Como uso las grid areas?
▶Como puedo hacer mi cuadricula responsive?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.