Générateur de CSS Grid
Outil de génération de mise en page CSS Grid en ligne gratuit, avec éditeur visuel
Qu'est-ce que CSS Grid Layout ?
CSS Grid Layout est un puissant systeme de mise en page bidimensionnel qui permet d'arranger des elements simultanement en lignes et colonnes. Contrairement a Flexbox qui traite une direction a la fois, Grid vous donne un controle total sur les deux axes. Les proprietes cles incluent grid-template-columns pour definir les pistes de colonnes, grid-template-rows pour les pistes de lignes, gap pour l'espacement et grid-area pour positionner les elements dans des regions nommees.
Comment utiliser le generateur de grille
Utilisez le curseur Colonnes pour definir le nombre de colonnes (1 a 12). Utilisez le curseur Lignes pour le nombre de lignes (1 a 12). Ajustez le curseur Gap pour controler l'espacement entre les cellules (0 a 32px). La zone d'apercu affiche une grille en direct avec des cellules numerotees. Une fois satisfait, copiez le code CSS genere et collez-le dans votre projet.
Comprendre les proprietes Grid
grid-template-columns et grid-template-rows definissent les tailles des pistes. La fonction repeat() cree des pistes egales, par exemple repeat(3, 1fr) cree trois colonnes egales. L'unite fr repartit l'espace disponible proportionnellement. gap definit l'espacement entre les lignes et colonnes. Si necessaire, vous pouvez definir des valeurs differentes pour row-gap et column-gap.
Modeles de grilles courants
Layout Saint Graal : en-tete a 3 colonnes, contenu principal avec barre laterale. Cartes de tableau de bord : repeat(auto-fill, minmax(250px, 1fr)) cree des grilles de cartes responsives. Hero pleine largeur avec contenu en dessous : une colonne couvrant toutes les lignes. Layout magazine : portees mixtes avec grid-column et grid-row pour des tailles de cellule variees.
Conseils pour les grilles responsives
Utilisez auto-fill ou auto-fit avec minmax() pour des grilles responsives fluides sans media queries. Combinez avec clamp() pour des dimensions flexibles. Definissez une largeur minimale avec minmax(200px, 1fr) pour que les elements ne deviennent pas trop petits. Utilisez des media queries pour changer le nombre de colonnes aux points de rupture. Envisagez les container queries pour la responsivite au niveau des composants.
▶Quand utiliser Grid plutot que Flexbox ?
▶Quels navigateurs supportent CSS Grid ?
▶Puis-je imbriquer des grilles dans des grilles ?
▶Comment fonctionnent les gaps de grille ?
▶Quelle est la difference entre auto-fill et auto-fit ?
▶Comment utiliser les grid areas ?
▶Comment rendre ma grille responsive ?
Si cet outil vous a été utile, pensez à m’offrir un café.
Achetez-moi un café.