Générateur de CSS Grid - Créez des Grilles Visuellement et Copiez le CSS
Générateur de CSS Grid
Colonnes, lignes, espacements et cartes adaptatives avec aperçu
Aperçu en Direct
La grille se met à jour quand vous changez colonnes, tailles et espacements.
Cartes Adaptatives
Le mode auto-fit renvoie les cartes à la ligne sur petits écrans sans media queries.
Éléments sur Plusieurs Cases
Faites s'étendre le premier élément sur plusieurs colonnes ou lignes, un motif courant de carte mise en avant.
Privé
Tout s'exécute dans votre navigateur ; rien de ce que vous collez n'est envoyé.
CSS Grid en Bref
grid-template-columns: repeat(3, 1fr) crée trois colonnes égales, où fr est une fraction de l'espace libre. Les pistes peuvent aussi être fixes (200px), dimensionnées au contenu (auto) ou souples avec des limites (minmax(150px, 1fr)). gap définit l'espace entre les pistes sans ajouter de marges aux éléments, et grid-column: span 2 permet à un élément d'occuper deux colonnes.
Le motif adaptatif repeat(auto-fit, minmax(min(200px, 100%), 1fr)) place autant de colonnes que possible, chacune d'au moins 200px, et les étire pour remplir la ligne ; le min() intérieur empêche une carte de déborder sur un écran de moins de 200px. Utilisez Grid pour les mises en page à deux dimensions et Flexbox pour les rangées de contenu à une dimension.
Points Clés
- Unités fr: Répartissent l'espace libre proportionnellement.
- gap, pas margin: Les espacements n'apparaissent jamais sur les bords extérieurs.
- auto-fit pour les cartes: Adaptatif sans une seule media query.