Generador CSS Grid
El generador de CSS Grid construye cuadrículas a partir de un número de columnas y filas, gaps, valores grid-template personalizados opcionales y alineación de elementos, con vista previa en vivo y CSS listo para copiar.
Acerca de esta herramienta
El generador de CSS Grid construye cuadrículas a partir de un número de columnas y filas, gaps, valores grid-template personalizados opcionales y alineación de elementos, con vista previa en vivo y CSS listo para copiar.
Cómo se usa
- Define el número de columnas y filas.
- Ajusta el espacio entre columnas y entre filas.
- Si quieres, introduce plantillas personalizadas como 200px 1fr 1fr.
- Elige justify-items y align-items y haz clic en Copiar CSS.
Datos útiles
- La unidad fr reparte el espacio libre: 1fr 2fr hace que la segunda columna sea el doble de ancha que la primera.
- repeat(3, 1fr) es la forma abreviada de tres columnas iguales.
- column-gap y row-gap definen los espacios entre las pistas.
- Grid es bidimensional: controla filas y columnas a la vez.
- repeat(auto-fit, minmax(200px, 1fr)) crea una cuadrícula responsive sin media queries.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo creo una cuadrícula de 3 columnas en CSS?
Usa display: grid; grid-template-columns: repeat(3, 1fr); en el contenedor y añade un gap para el espaciado.
¿Qué significa fr en CSS Grid?
fr es una fracción del espacio libre disponible en el contenedor grid.
¿CSS Grid o Flexbox?
Grid es mejor para layouts bidimensionales, como estructuras de página y cuadrículas de tarjetas; Flexbox, para filas o columnas unidimensionales.
¿Cómo hago una cuadrícula responsive sin media queries?
Usa grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); así las columnas se reacomodan automáticamente según el espacio disponible.