Grille
<gcds-grid>

Autres noms : mise en page, colonnes, disposition en colonnes, boîte de style grille.

Une grille est une mise en page réactive et flexible.

• GitHub
• Figma

Créer une grille

Utilisez des grilles pour créer des mises en page flexibles et réactives pour différentes tailles d'écran. Le composant Grille utilise la grille CSS pour permettre des mises en page plus complexes.

Codage et accessibilité des grilles

Ajustez les mises en page pour optimiser l'expérience sur différentes tailles d'écran

• Optimisez chaque composant Grille pour les différentes tailles d'écran qu'une personne utilisera lorsqu'elle visitera votre site ou utilisera votre produit, y compris en passant d'un écran à l'autre.
• Adaptez votre contenu aux appareils mobiles, aux tablettes et aux grands écrans en définissant la mise en page de chaque fenêtre d'affichage pour ce composant.
  • Les petits écrans, comme ceux des appareils mobiles, affichent généralement une mise en page à une colonne.
  • Les écrans de taille moyenne, comme les tablettes, affichent généralement une mise en page d'une à deux colonnes.
  • Les écrans plus grands, comme ceux des ordinateurs de bureau, affichent généralement une mise en page de trois ou quatre colonnes.
• Utilisez la propriété columns pour ajouter votre mise en page pour les plus petits écrans ou si vous utilisez la même disposition pour tous les écrans.
• Utilisez la propriété columns-tablet pour définir la mise en page sur tablette (48 rem et 768 px et au-delà) ou si vous utilisez la même disposition pour les moyens et grands écrans.
• Utilisez la propriété columns-desktop pour définir la mise en page pour les écrans plus grands (64 rem et 1024 px et au-delà).

Conseil : Visez la simplicité pour vos mises en page. Envisagez d'optimiser chaque mise en page pour les écrans d'appareils mobiles, de tablettes et d'ordinateur. Vous offrirez ainsi une meilleure expérience utilisateur, quelle que soit la fenêtre d'affichage.

Veillez à l'accessibilité en utilisant des balises standards

La propriété tag utilise une balise div par défaut.

• Vous pouvez remplacer la balise par une valeur adaptée au contexte à l'aide de balises standards. Par exemple, pour insérer une liste non ordonnée, définissez la propriété de balise à ul.
• Choisissez une balise dans la liste des options disponibles pour la grille dans le générateur de code. L'utilisation de balises HTML qui respectent les normes établies et les règles sémantiques augmente l'accessibilité du contenu et améliore l'expérience d'utilisation.

Ajoutez un espacement entre les colonnes

• Utilisez la propriété gap pour ajouter de l'espacement entre vos columns dans la grille.
• Utilisez les unités de style de Système de design GC comme référence pour la taille de votre gap dans la grille. Les mesures des unités correspondent aux valeurs d'espacement de l'attribut gap (150-800).

Choisissez une option pour des colonnes de largeur égale

Désactivez la définition de la largeur minimale et de la largeur maximale lorsque vous souhaitez concevoir des colonnes de largeur égale sans restrictions de largeur. Cela permettra à la grille et à ses colonnes de s'adapter à la fenêtre d'affichage.

Exemple d'affichage avec trois colonnes sur un ordinateur de bureau, deux colonnes sur la tablette et une colonne sur appareil mobile :

Ordinateur de bureau

Tablette

Mobile

Définissez la largeur minimale et la largeur maximale pour concevoir des colonnes de largeur égale afin de limiter la largeur des colonnes sur n'importe quelle taille d'écran.

• Définissez une largeur minimale lorsque vous voulez éviter qu'une colonne soit trop étroite dans les plus petites fenêtres d'affichage.
• Définissez une largeur maximale lorsque vous voulez éviter qu'une colonne soit trop large dans les plus grandes fenêtres d'affichage.

Un exemple utilisant des colonnes de largeur égale avec une largeur minimale de 6,25rem (100px) et une largeur maximale de 18,75rem (300px) pour toutes les tailles d'écran :

Ordinateur de bureau

Tablette

Mobile

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.