Qu'est-ce que CSS Grid ?
CSS Grid Layout est un système de mise en page bidimensionnel qui vous permet de créer des conceptions complexes basées sur une grille avec des lignes et des colonnes. Contrairement à Flexbox qui gère une dimension à la fois, Grid vous donne un contrôle total sur le positionnement horizontal et vertical des éléments.
Comment utiliser ce générateur
- Définissez le nombre de colonnes et de lignes pour votre mise en page de grille.
- Ajustez la valeur de l'écart pour contrôler l'espacement entre les cellules de la grille.
- L'aperçu se met à jour en temps réel pour afficher votre mise en page de grille.
- Copiez le code CSS généré dans la feuille de style de votre projet.
Questions fréquemment posées
Que signifie 1fr ?
L'unité fr représente une fraction de l'espace disponible dans le conteneur de grille. repeat(3, 1fr) crée trois colonnes de largeur égale qui partagent l'espace uniformément.
Puis-je mélanger des colonnes fixes et flexibles ?
Oui. Vous pouvez combiner les unités fr avec des tailles fixes comme 200px 1fr 1fr pour créer une mise en page avec barre latérale et des zones de contenu principal flexibles.