Comprendre les Pistes de Grille
Les pistes de grille sont les lignes et les colonnes qui definissent la structure de votre grille. Chaque piste peut etre dimensionnee avec differentes unites : les unites fr distribuent l'espace restant proportionnellement, px definit des dimensions fixes et auto ajuste les pistes selon le contenu. La fonction repeat() simplifie les definitions de pistes repetitives.
L'Unite fr Expliquee
L'unite fr represente une fraction de l'espace disponible dans le conteneur de grille. Si vous definissez trois colonnes comme 1fr 2fr 1fr, la colonne centrale occupe deux fois l'espace de chaque colonne exterieure. Cette unite rend la creation de mises en page proportionnelles intuitive et evite les calculs complexes de pourcentage.
Espacement et Separation
La propriete gap controle l'espacement entre les cellules de la grille sans affecter les bords exterieurs. Anciennement appelee grid-gap, la propriete abregee gap fonctionne aussi bien dans Grid que dans Flexbox. Vous pouvez definir les espacements de ligne et de colonne independamment en utilisant row-gap et column-gap.
Modeles de Mise en Page Courants
La mise en page Holy Grail utilise 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.
