ToolNestGenerador Gratuito de Cuadrícula CSS
Última actualización: 18 de octubre de 2026
Respuesta rápida: CSS Grid es la forma más rápida de construir layouts de página bidimensionales, pero acertar a mano con la sintaxis de grid-template-columns es engorroso. Este generador de cuadrícula CSS gratuito te permite construir el layout visualmente: arrastra los deslizadores de columnas, filas y espacio, haz clic en cualquier celda para que un elemento abarque varias columnas o filas, empieza con seis plantillas probadas (holy grail, barra lateral, panel, galería…) y luego copia CSS + HTML limpios para pegarlos en tu proyecto. Todo se ejecuta en tu navegador; sin registro.
Seleccionado: elemento 1
CSS
HTML
Consejo: haz clic en cualquier celda de la vista previa y ajusta su expansi\u00f3n de columna y fila \u2014 el CSS generado se actualiza al instante.
✓ Gratis para siempre · ✓ Sin registro · ✓ Lo que escribes permanece en tu navegador — nunca se envía a nuestros servidores.
Cómo usar Generador de Cuadrícula CSS
- Elige una plantilla (o ajusta columnas, filas y espacio con los deslizadores).
- Elige la unidad de las pistas: fr para layouts flexibles, px para fijos, % para basados en porcentaje.
- Haz clic en cualquier celda de la vista previa para seleccionarla y ajusta su expansión de columna y de fila.
- Revisa el CSS y el HTML generados bajo la vista previa: se actualizan en vivo mientras diseñas.
- Copia el código y pégalo en tu hoja de estilos y tu marcado. Cambia los nombres de clase para que coincidan con tu proyecto.
Por qué usar Generador de Cuadrícula CSS
- Vista previa en vivo — la cuadrícula se redibuja con cada movimiento del deslizador; lo que ves es lo que el código crea.
- Expansión de elementos — haz clic en cualquier celda y extiéndela por columnas y filas; las reglas
grid-column: span Nse generan solas. - Seis plantillas reales — layouts de 12 columnas, holy grail, barra lateral, panel, galería y revista para empezar.
- Tamaño fr / px / % — genera pistas
repeat()en la unidad que encaje con tu diseño. - Código limpio para copiar — CSS comentado más la estructura HTML correspondiente, con un clic.
Casos de uso comunes
- Maquetas de página: Empieza con la plantilla holy grail o barra lateral y bosqueja el esqueleto de una página nueva antes de escribir código. Envía el CSS generado al desarrollador junto con el mockup.
- Paneles y administración: La plantilla de panel (tarjetas anchas arriba, cuadrícula densa abajo) es la forma de la mayoría de las UIs de administración: ajusta las expansiones a tus widgets y copia el código.
- Galerías de fotos: La plantilla de galería combina una pieza destacada grande con una cuadrícula uniforme — el look clásico de portafolio — con las expansiones de fila haciendo el trabajo editorial.
- Cuadrículas de blog y revista: La plantilla de revista mezcla historias destacadas anchas con columnas estrechas, y el código cae directo en un tema o plantilla.
- Aprender Grid visualmente: Los deslizadores y las expansiones hacen concretos en segundos conceptos abstractos (unidades fr, expansión, auto-colocación): más rápido que leer la especificación.
Generador de Cuadrícula CSS frente a las alternativas
- grid.layoutit.com (Layoutit): Un constructor visual de grids pulido y conocido, con áreas de arrastrar y soltar. Excelente herramienta: la nuestra es una alternativa más ligera — plantillas, expansiones y código para copiar en una página sin anuncios que carga al instante.
- Escribir el CSS a mano: Control total y cero dependencias: la opción correcta cuando sabes exactamente lo que quieres. Este generador gana en exploración: prueba seis layouts en un minuto en vez de escribir y recargar.
- Frameworks CSS (Bootstrap, Tailwind): Geniales si tu proyecto ya usa uno: sus sistemas de grid están probados en batalla. Excesivos como dependencia para una página independiente, y menos expresivos que Grid puro para layouts con expansiones.
- Layouts solo con Flexbox: Bien para disposiciones unidimensionales como barras de navegación y filas de tarjetas. Para estructura de página realmente bidimensional — encabezados, barras laterales, paneles — Grid es la herramienta diseñada para el trabajo.
En resumen: si ya estás metido en el sistema de grid de un framework, quédate ahí: la consistencia gana a la novedad. Para páginas independientes, prototipos y aprender, diseñar la cuadrícula visualmente aquí y pegar el CSS generado es el camino honesto más rápido a un layout que funciona.
Preguntas frecuentes
¿Cómo creo un layout con CSS Grid?
Tres líneas: pon
display: grid en el contenedor, define las pistas con grid-template-columns (p. ej. repeat(3, 1fr)) y ajusta el gap. Los elementos fluyen solos a las celdas. Este generador escribe esas líneas por ti: diseña visualmente, copia el CSS, listo.¿Cuál es la diferencia entre CSS Grid y Flexbox?
Grid es bidimensional (filas y columnas a la vez); Flexbox es unidimensional (una fila o una columna). Regla práctica: los layouts de página y sección van en Grid, los interiores de componentes (barras de navegación, filas de botones, pies de tarjeta) en Flexbox. Se combinan: una celda de grid puede ser un contenedor flex.
¿Qué significa 1fr en CSS Grid?
Una fracción del espacio libre.
repeat(3, 1fr) divide el contenedor en tres columnas iguales; 1fr 2fr hace la segunda columna el doble de ancha que la primera. A diferencia de los porcentajes, fr descuenta los espacios automáticamente, así que repeat(12, 1fr) con 16px de gap simplemente funciona.¿Cómo hago que un elemento abarque varias columnas?
Con
grid-column: span 2 (o grid-row: span 2 para filas). En esta herramienta, haz clic en la celda y ajusta la expansión: la regla aparece sola en el CSS generado. Usos clásicos: un encabezado de ancho completo, una barra lateral que abarca todas las filas.¿Cómo hago responsive una cuadrícula CSS?
La receta estándar es
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)): las columnas aparecen o colapsan según el viewport, sin media queries. Este generador produce conteos fijos de pistas, que son el punto de partida correcto para layouts intencionales; cambia a la receta auto-fit cuando quieras una cuadrícula fluida de tarjetas.¿CSS Grid funciona en todos los navegadores?
Sí: todos los navegadores modernos lo traen sin prefijos desde 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). El soporte global supera el 98 %. Si aún das soporte a navegadores muy antiguos, ofrece un respaldo apilado simple; para prácticamente todo proyecto actual, Grid funciona sin más.
¿Grid o tablas para el layout de página?
Grid, siempre. Las tablas son para datos tabulares, no para layout: rompen la accesibilidad (los lectores de pantalla las anuncian como datos), resisten el responsive y mezclan contenido con presentación. Grid te da la misma estructura visual con HTML semántico.