Este generador de CSS Grid te permite crear cuadrículas con display: grid y ver el resultado al instante. Ajusta el número de columnas y filas, el espaciado y la alineación, y copia el código listo para usar. La forma más rápida de maquetar en dos dimensiones. Funciona en tu navegador, sin registro y en español.
Cómo usar el generador de CSS Grid
- Elige el número de columnas y filas.
- Ajusta el gap y la alineación de los elementos.
- Copia el CSS y aplícalo a tu contenedor.
Cómo funciona CSS Grid
CSS Grid define una cuadrícula con grid-template-columns y grid-template-rows. La notación repeat(3, 1fr) crea tres columnas de igual ancho, donde fr es una fracción del espacio disponible. Con gap se separan las celdas. A diferencia de Flexbox, que trabaja en una dimensión, Grid maqueta filas y columnas a la vez. Para diseños en una sola dirección usa nuestro generador de Flexbox.
Preguntas frecuentes
¿Qué es la unidad fr?
Es una fracción del espacio libre del contenedor. 1fr 1fr reparte el ancho en dos partes iguales; 2fr 1fr, en dos tercios y un tercio.
¿Grid sustituye a Flexbox?
No, se complementan. Grid es mejor para maquetación en dos dimensiones y Flexbox para alinear elementos en una fila o columna.
¿Funciona en todos los navegadores?
Sí, CSS Grid está soportado por todos los navegadores modernos.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
