Generador de sistema de cuadrícula CSS
Genera una cuadrícula de columnas adaptable con tus propios breakpoints, columnas, medianiles, márgenes y ancho máximo. Exporta CSS, clases de utilidad o configuración de Tailwind.
Cargando Generador de cuadrícula CSS…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de cuadrícula CSS
- 1
Abre Generador de cuadrícula CSS en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Un sistema de cuadrícula da a todas las páginas la misma estructura de base: un número fijo de columnas, medianiles coherentes y un ancho máximo de contenido que se adapta a cada tamaño de pantalla. Este generador de sistema de cuadrícula te permite definir esa estructura una vez y exportar código listo, para que diseñadores y desarrolladores trabajen sobre la misma cuadrícula.
Cómo crear una cuadrícula
- Define el ancho máximo de contenido en píxeles.
- Edita los breakpoints: para cada tamaño de pantalla, elige el número de columnas, el medianil entre ellas y el margen exterior.
- Revisa la vista previa en vivo de las columnas.
- Elige un prefijo de clase si exportas clases.
- Copia el código como CSS simple, clases de utilidad o configuración de Tailwind.
Una configuración típica
| Pantalla | Columnas | Medianil |
|---|---|---|
| Móvil | 4 | 16px |
| Tableta | 8 | 24px |
| Escritorio | 12 | 24 a 32px |
Las doce columnas son populares porque se dividen de forma exacta en mitades, tercios, cuartos y sextos.
Consejos
- Coincide con tu diseño: usa las mismas columnas y medianiles que la cuadrícula de tu archivo de Figma.
- Limita la longitud de línea: un ancho máximo de unos 1200 a 1440px mantiene el texto legible en pantallas grandes.
- Usa una escala de espaciado: medianiles y márgenes de 8, 16, 24 o 32px hacen que el espaciado se sienta coherente.
- Deja que el contenido decida los breakpoints: añade uno donde la maquetación empiece a romperse, no solo en tamaños de dispositivo.
Sistema de cuadrícula frente a CSS grid
Un sistema de cuadrícula es una convención de diseño; CSS grid es la función del navegador que puede implementarla. El CSS generado usa CSS moderno, así que no necesita ningún framework. Para maquetaciones de una dimensión dentro de la cuadrícula, usa el generador de Flexbox, y define los tamaños de texto con el generador de escala tipográfica.
Preguntas frecuentes
¿Cuántas columnas debe tener una cuadrícula?
Doce columnas en escritorio es lo más habitual porque se dividen en mitades, tercios y cuartos. Los móviles suelen usar 4 columnas y las tabletas 8.
¿Qué es un medianil?
El espacio entre columnas. Los medianiles típicos son de 16px en móviles y de 24 a 32px en pantallas más grandes.
¿Puedo exportar la cuadrícula para Tailwind?
Sí. Elige el formato Tailwind para obtener una configuración de tus pantallas y espaciados.
¿Puedo definir mis propios breakpoints?
Sí. Edita el ancho, las columnas, el medianil y el margen de cada breakpoint.
¿Qué ancho máximo debo usar?
Entre unos 1200 y 1440 píxeles funciona para la mayoría de webs y mantiene líneas de texto de longitud cómoda en pantallas anchas.
¿El código necesita Bootstrap u otro framework?
No. El CSS y las clases generadas son CSS puro que funciona por sí solo.