docs: add guidance for grid gap prop (#474)

src/en/components/grid/code.md

@@ -32,6 +32,11 @@ By default, the `tag` property is set to use a `div` tag.
 - Opt to change the tag to a context-appropriate value using standard tags. For example, when using an unordered list set the tag property to `ul`.
 - Choose a tag from the list of available options for grid in the code builder. Using established standards for HTML tags that are semantic increase the accessibility of the content and improves the experience for everyone.
 
+### Add spacing between columns
+
+- Use the `gap` property to add spacing between your `columns` in the grid.
+- Use GC Design System <a href="{{ links.designTokens }}">design tokens</a> as a reference for the size of the `gap` in the grid. The tokens measurements match up with the spacing values for the `gap` attribute (150-800).
+
 ### Choose an option for equal width columns
 
 Opt out of setting the minimum and maximum width when you want to design equal-width columns without width restrictions. This will allow the grid and its columns to scale to the size of the viewport.

src/fr/composants/grille/code.md

@@ -32,6 +32,11 @@ 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 <a href="{{ links.designTokens }}">unités de style</a> 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.