Config
3 colonnes / espacement 4
Sortie
grid grid-cols-3 gap-4
Outils de design
Générateur de grilles Tailwind — Classes et aperçu
Générez des classes de grille Tailwind à partir du nombre de colonnes, de l'espacement et du nombre d'éléments, avec un aperçu en direct. Utile pour les grilles de cartes, les prototypes et les essais rapides de mise en page.
TailwindGrilleMise en page
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur de grilles Tailwind
Générez des classes de grille Tailwind à partir du nombre de colonnes, de l'espacement et du nombre d'éléments, avec un aperçu en direct. Utile pour les grilles de cartes, les prototypes et les essais rapides de mise en page.
Tailwind Container ClassList
调整列数、间距或示例项数量后，可复制 Class 或 HTML 片段。
Cas d’usage
- Élaborez rapidement une grille de cartes
- Générez des classes de présentation de prototypes
- Expérimentez avec le nombre de colonnes
Mode d’emploi
- Définissez les colonnes et les espaces
- Ajustez le nombre d'éléments d'échantillon
- Prévisualisez et copiez les classes Tailwind
Exemples d’entrée et de sortie
FAQ
Génère-t-il un composant complet ?
Il se concentre sur les classes Grid et l'aperçu. Vous composez toujours la structure HTML de votre projet.
Les points d'arrêt réactifs sont-ils inclus ?
Centres de sortie sur les colonnes et les espaces actuels. Ajoutez manuellement des préfixes md:/lg : lorsque vous avez besoin de points d'arrêt.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur de grille CSS
Générateur de grille CSS – Lignes, colonnes et espaces
Définissez le nombre de colonnes et de lignes ainsi que les espaces pour générer un affichage de base : disposition en grille. Prévisualisez la structure des pistes, essayez des modèles rapides et copiez du CSS ou du HTML pour les mises en page d'administration et les grilles de cartes.
CSS Grille Mise en page
Générateur Flexbox
Générateur Flexbox — Mise en page visuelle unidimensionnelle
Ajustez la direction flexible, la justification du contenu, l'alignement des éléments, le retour à la ligne et l'espacement avec un aperçu en direct. Ajoutez ou supprimez des cases pour voir l'habillage et l'espacement, puis copiez le CSS (et l'échafaudage HTML) généré dans votre projet.
Conception CSS Mise en page