Generador de Cuadrícula
Genera un sistema de cuadrícula CSS personalizado según tus necesidades.
Ajustes
Resultado
Acerca de la herramienta
Este generador crea el código de una cuadrícula responsive cuyo número de columnas cambia según el tamaño de pantalla. Encaja en una lista de tarjetas, una galería de productos o un panel de control. Defines de 1 a 12 columnas para móvil, tablet y escritorio, un espaciado en píxeles y un contenedor limitado a 1000 px o de ancho completo.
El código está disponible en tres variantes. En Tailwind CSS obtienes clases grid-cols con los prefijos md y lg. En Bootstrap, clases row-cols, que el framework limita a seis columnas, con el espaciado definido mediante sus variables de gutter. En CSS puro, una hoja de estilos con dos media queries, a 768 y 1024 px, junto con un ejemplo de HTML.
Cómo usarla
- En Seleccionar Framework, elige Tailwind CSS, Bootstrap o CSS, y después el Tamaño del Contenedor.
- Rellena Columnas para Móvil, Columnas para Tablet y Columnas para Escritorio, y el Espacio (en píxeles).
- Usa los botones Móvil, Tableta y Escritorio del Resultado para revisar cada disposición.
- Pulsa Generar Cuadrícula y después Copiar Código CSS, o Copiar Código HTML en el modo CSS.
Preguntas frecuentes
¿Qué puntos de ruptura se usan?
La versión en CSS puro cambia de disposición a partir de 768 px para tablet y de 1024 px para escritorio. Las versiones de Tailwind CSS y Bootstrap usan los prefijos md y lg propios de cada framework.
¿Por qué Bootstrap está limitado a seis columnas?
Las clases row-cols de Bootstrap solo van de 1 a 6. Si pides más columnas, la herramienta deja el valor en seis y añade un comentario en el código generado para avisarte.
¿La herramienta genera también el HTML?
En el modo CSS, sí: un contenedor, la cuadrícula y tres elementos de ejemplo, que se copian aparte. En Tailwind CSS y Bootstrap, el resultado ya es HTML con las clases aplicadas, listo para añadir tus propios elementos.
¿Se envían mis ajustes a algún sitio?
No. El código se genera en tu navegador, sin ninguna petición de red. El framework, las columnas, el espaciado y el tamaño del contenedor solo se guardan en el almacenamiento local del navegador.