Generador de CSS Grid
Elige las columnas, las filas y el espacio entre ellas, o usa el modo responsivo para que las tarjetas se reorganicen solas según la pantalla. La vista previa muestra el resultado al instante.
Layout con CSS Grid
Arrastra la esquina de la vista previa para probar anchos. Toca un elemento para que ocupe 2 columnas.
Disponible en: 
Generador de CSS Grid: para qué sirve
Elige columnas fijas (con atajos para 2, 3 y 4 columnas, contenido con barra lateral y menú con contenido) o el modo responsivo, en el que las columnas se ajustan al ancho con repeat(auto-fit, minmax()). Define el número de elementos y el espacio entre ellos.
Toca un elemento de la vista previa para que ocupe dos columnas y arrastra la esquina de la vista previa para probar anchos. El CSS y el HTML quedan listos para copiar.
Cómo usar
- Elige el modo y las columnas.
- Define elementos y espacio; toca elementos para que ocupen 2 columnas.
- Copia el CSS y el HTML.
Cuándo usar
- Cuadrículas de tarjetas, productos y fotos.
- Layouts con barra lateral.
- Aprender CSS Grid viendo el resultado.
Preguntas frecuentes
¿Qué significa 1fr?
Una fracción del espacio que sobra. Tres columnas 1fr 1fr 1fr dividen el ancho en partes iguales; 2fr 1fr hace que la primera columna tenga el doble que la segunda.
¿Qué hace repeat(auto-fit, minmax(220px, 1fr))?
Crea todas las columnas que quepan, cada una con un mínimo de 220px, y estira las columnas para ocupar toda la fila. Es la forma más simple de hacer una cuadrícula de tarjetas responsiva sin media queries.
¿Cómo hago para que un elemento ocupe dos columnas?
Usa grid-column: span 2 en el elemento. En la vista previa, toca un elemento para alternar entre ocupar 1 o 2 columnas y el CSS se actualiza.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.