Grille
`<gcds-grid>`

Autres noms : mise en page, colonnes, disposition en colonnes, conteneur de style grille.

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

GitHub
Figma

Aperçu du composant grille

Sur cette page

Codage et accessibilité des grilles
Exemples
Générateur de code

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

Ceci est un exemple de contenu pour illustrer le composant Grille.

Tablette

Ceci est un exemple de contenu pour illustrer le composant Grille.

Mobile

Ceci est un exemple de contenu pour illustrer le composant Grille.

<gcds-grid
  tag="article"
  columns-desktop="1fr 1fr 1fr"
  columns-tablet="1fr 1fr"
  columns="1fr"
>
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
</gcds-grid>

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

Ceci est un exemple de contenu pour illustrer le composant Grille.

Tablette

Ceci est un exemple de contenu pour illustrer le composant Grille.

Mobile

Ceci est un exemple de contenu pour illustrer le composant Grille.

<gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))">
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
</gcds-grid>

Exemples

Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.

Attributs facultatifs

Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.

`align-content`

L’attribut align-content définit l’alignement de la grille le long de l’axe de bloc (axe des colonnes) lorsque la taille totale de la grille est inférieure à celle de son conteneur. Les options sont :

center
end
space-around
space-between
space-evenly
start
stretch

<gcds-grid align-content="space-between" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`align-items`

L’attribut align-items définit l’alignement des éléments de la grille le long de l’axe de bloc (axe des colonnes). Les options sont :

baseline
center
end
start
stretch

<gcds-grid align-items="baseline" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p class="pb-800">2</p>
  <p class="pt-900">3</p>
</gcds-grid>

`alignment`

L’attribut alignment définit l’alignement de la grille lorsque la taille du conteneur est inférieure à celle de son parent. Les options sont :

center
end
start

<gcds-grid alignment="end" container="sm" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`columns`

L’attribut columns définit le nombre de colonnes de la grille pour toutes les fenêtres d’affichage, à moins que columns-tablet ou columns-desktop ne soient définis. Utilisez columns-desktop et columns-tablet pour définir des mises en page différentes selon l’appareil.

<gcds-grid columns="1fr 1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`columns-desktop`

L’attribut columns-desktop permet de définir un nombre de colonnes différent pour les écrans d’ordinateur de bureau.

<gcds-grid columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`columns-tablet`

L’attribut columns-tablet permet de définir un nombre de colonnes différent pour les écrans de tablette. Si columns-desktop n’est pas défini, columns-tablet s’applique également aux écrans d’ordinateur de bureau.

<gcds-grid columns-tablet="1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`container`

L’attribut container définit la taille du conteneur de la grille. Les options sont :

full
xl
lg
md
sm
xs

<gcds-grid container="sm" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`display`

L’attribut display définit le conteneur comme un bloc (grid) ou un élément qui reste sur la même ligne que les éléments environnants (inline-grid). Les options sont :

grid (par défaut)
inline-grid

<gcds-grid display="inline-grid" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`gap`

L’attribut gap définit l’espacement horizontal et vertical entre les éléments de la grille pour toutes les fenêtres d’affichage, à moins que gap-tablet ou gap-desktop ne soient définis. Utilisez gap-desktop et gap-tablet pour définir des espacements différents selon l’appareil.

<gcds-grid gap="450" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`gap-desktop`

L’attribut gap-desktop permet de définir un espacement horizontal et vertical entre les éléments de la grille pour les écrans d’ordinateur de bureau.

<gcds-grid gap-desktop="800" gap="400" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`gap-tablet`

L’attribut gap-tablet permet de définir un espacement horizontal et vertical entre les éléments de la grille pour les écrans de tablette. Si gap-desktop n’est pas défini, gap-tablet s’applique également aux écrans d’ordinateur de bureau.

<gcds-grid gap-tablet="500" gap="400" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`justify-content`

L’attribut justify-content définit l’alignement de la grille le long de l’axe de ligne (axe de rangée) lorsque la taille totale de la grille est inférieure à celle de son conteneur. Les options sont :

center
end
space-around
space-between
space-evenly
start
stretch

<gcds-grid justify-content="center" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`justify-items`

L’attribut justify-items définit l’alignement des éléments de la grille le long de l’axe de ligne (axe de rangée). Les options sont :

center
end
start
stretch

<gcds-grid justify-items="center" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

`place-content`

L’attribut place-content définit à la fois les attributs align-content et justify-content. Les options sont :

center
end
space-around
space-between
space-evenly
start
stretch

<gcds-grid place-content="space-around" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`place-items`

L’attribut place-items définit à la fois les attributs align-items et justify-items. Les options sont :

center
end
start
stretch

<gcds-grid place-items="end" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</gcds-grid>

`tag`

L’attribut tag définit l’élément HTML utilisé pour afficher le conteneur de la grille. Par défaut, il est défini à div. Les options sont :

div (par défaut)
article
aside
dl
main
nav
ol
section
ul

<gcds-grid tag="article" columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

Emplacements (slots)

L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.

`default`

L’emplacement par défaut sert à placer les éléments de la grille.

<gcds-grid columns-tablet="1fr 1fr 1fr" columns="1fr">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</gcds-grid>

Générateur de 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.

Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
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.

Ceci est un exemple de contenu pour illustrer le composant Grille.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires

Signaler un problème sur GitHub

2026-05-20

Grille<gcds-grid>

Aperçu du composant grille

Sur cette page

Codage et accessibilité des grilles

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

Veillez à l’accessibilité en utilisant des balises standards

Ajoutez un espacement entre les colonnes

Choisissez une option pour des colonnes de largeur égale

Exemples

Dans cette section

Attributs facultatifs

align-content

align-items

alignment

columns

columns-desktop

columns-tablet

container

display

gap

gap-desktop

gap-tablet

justify-content

justify-items

place-content

place-items

tag

Emplacements (slots)

default

Grille
`<gcds-grid>`

`align-content`

`align-items`

`alignment`

`columns`

`columns-desktop`

`columns-tablet`

`container`

`display`

`gap`

`gap-desktop`

`gap-tablet`

`justify-content`

`justify-items`

`place-content`

`place-items`

`tag`

`default`