Grid CSS
Crea layouts con CSS Grid: columnas, filas y espacios con vista previa. Copia el código, gratis y sin registro.
Resultado
¿Cómo usar esta herramienta?
Crea layouts con CSS Grid: columnas, filas y espacios.
Escribe tus datos, pulsa Generar CSS y obtén el resultado al instante. Puedes copiarlo con el botón «Copiar resultado». Todo se calcula en tu navegador: tus datos no salen de tu dispositivo.
Preguntas frecuentes
¿Cómo creo un layout con Grid?
Elige el número de columnas, el espacio entre ellas y el tipo de layout; pulsa Generar CSS para obtener el código Grid.
¿Puedo definir filas y columnas?
Sí, puedes definir columnas, filas y espacios (gap) con vista previa antes de copiar el código.
¿Grid o Flexbox?
CSS Grid es ideal para layouts bidimensionales (filas y columnas); Flexbox brilla en distribuciones de una sola dimensión.
¿Funciona en el móvil?
Sí, funciona en el móvil, la tableta y la computadora sin instalar nada.
Herramientas relacionadas de Color y diseño
Flexbox
Genera contenedores flexibles con la alineación y el espaciado que elijas.
Usar gratisEscala de espaciado 8pt
Sistema de espaciado basado en múltiplos de 8 (8pt grid) para interfaces consistentes.
Usar gratisSombra de texto
Crea text-shadow personalizadas con vista previa en vivo.
Usar gratisDegradado animado
Fondo con degradado en movimiento: elige colores y velocidad, copia la animación CSS.
Usar gratisNombres de colores HTML
Tabla de referencia con los 148 nombres de colores CSS y su código HEX.
Usar gratisTest de daltonismo
Placas estilo Ishihara para orientarte sobre tu visión del color.
Usar gratis