Configuración
3 columnas / gap 4
Salida
grid grid-cols-3 gap-4
Herramientas de diseño
Constructor de Grid de Tailwind — Clases y vista previa
Genera clases de Tailwind Grid a partir de columnas, espaciado y número de elementos con una vista previa en vivo: útil para rejillas de tarjetas, maquetaciones de prototipo y experimentos rápidos de columnas.
TailwindGridMaquetación
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Constructor de Grid de Tailwind
Genera clases de Tailwind Grid a partir de columnas, espaciado y número de elementos con una vista previa en vivo: útil para rejillas de tarjetas, maquetaciones de prototipo y experimentos rápidos de columnas.
Tailwind Container ClassList
调整列数、间距或示例项数量后，可复制 Class 或 HTML 片段。
Casos de uso
- Genera el andamiaje de una rejilla de tarjetas rápidamente
- Genera clases de maquetación para prototipos
- Experimenta con recuentos de columnas
Cómo usar
- Define columnas y espaciado
- Ajusta el número de elementos de muestra
- Previsualiza y copia las clases de Tailwind
Entrada y salida de ejemplo
FAQ
¿Genera un componente completo?
Se centra en las clases Grid y en la vista previa. Tú aún compones la estructura HTML para tu proyecto.
¿Se incluyen los puntos de ruptura adaptables?
La salida se centra en las columnas y el espaciado actuales. Añade prefijos md:/lg: manualmente cuando necesites puntos de ruptura.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Generador de CSS Grid
Generador de CSS Grid — Filas, columnas y gaps
Define el número de columnas y filas, además de los espacios, para generar una maquetación básica con display:grid. Previsualiza la estructura de pistas, prueba plantillas rápidas y copia CSS o HTML para paneles de administración y rejillas de tarjetas.
CSS Grid Maquetación
Generador de Flexbox
Generador de Flexbox — Diseño visual unidimensional
Ajusta flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo. Añade o elimina cajas para ver el ajuste de línea y el espaciado y copia el CSS generado (y el andamiaje HTML) en tu proyecto.
Diseño CSS Maquetación