Comprendre les Pistes de Grille
Les pistes de grille sont les lignes et les colonnes qui définissent la structure de votre grille. Chaque piste peut être dimensionnee avec différentes unites : les unites fr distribuent l'espace restant proportionnellement, px définit des dimensions fixes et auto ajuste les pistes selon le contenu. La fonction repeat() simplifie les définitions de pistes repetitives.
L'Unite fr Expliquee
L'unite fr représenté une fraction de l'espace disponible dans le conteneur de grille. Si vous définissez trois colonnes comme 1fr 2fr 1fr, la colonne centrale occupe deux fois l'espace de chaque colonne exterieure. Cette unite rend la création de mises en page proportionnelles intuitive et evite les calculs complexes de pourcentage.
Espacement et Separation
La propriété gap contrôle l'espacement entre les cellules de la grille sans affecter les bords exterieurs. Anciennement appelee grid-gap, la propriété abregee gap fonctionne aussi bien dans Grid que dans Flexbox. Vous pouvez définir les espacements de ligne et de colonne indépendamment en utilisant row-gap et column-gap.
Modèles de Mise en Page Courants
La mise en page Holy Grail utilisé un en-tete couvrant toutes les colonnes, une section centrale a trois colonnes et un pied de page pleine largeur. Les mises en page Dashboard presentent une barre laterale fixe avec une grille de contenu flexible. Les mises en page Galerie utilisent des unites fr egales pour des cellules uniformes.
