Générateur de CSS Grid

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.

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.

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.

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.

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.