fix: update grid guidance (#392)

* fix: update grid guidance

* fix: update grid guidance

src/en/components/grid/base.md

@@ -16,7 +16,7 @@ A grid is a responsive, flexible column layout to position elements on a page.
 {% enddocLinks %}
 
 {% componentPreview "Grid component preview" %}
-<gcds-grid tag="article" columns-desktop="1fr 1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="500">
+<gcds-grid tag="article" columns-desktop="1fr 1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr">
 
   <p>This is some example content to display the grid component.</p>
   <p>This is some example content to display the grid component.</p>

src/en/components/grid/code.md

@@ -25,13 +25,6 @@ Use grids to create flexible and responsive layouts for various screen sizes. Th
 
 Tip: Keep layouts simple. Consider optimizing each layout for mobile, tablet, and desktop to provide a better user experience for all viewports.
 
-### Add spacing between columns
-
-- Add space between columns to reduce the cognitive load of reading content too densely packed together.
-- Whenever possible, align objects both vertically and horizontally.
-- Use the `gap` property to add spacing between your `columns` in the grid.
-- Use GC Design System <gcds-link href="{{ links.designTokens }}">design tokens</gcds-link> 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.
-
 ### Maintain standard tag usage to be accessible
 
 By default, the `tag` property is set to use a `div` tag.
@@ -48,7 +41,7 @@ Opt out of setting the minimum and maximum width when you want to design equal-w
 Desktop
 
 <div class="b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
+  <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr">
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
@@ -58,7 +51,7 @@ Desktop
 Tablet
 
 <div class="b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns-tablet="1fr 1fr" columns="1fr" gap="300">
+  <gcds-grid tag="article" columns-tablet="1fr 1fr" columns="1fr">
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
@@ -68,19 +61,20 @@ Tablet
 Mobile
 
 <div class="b-sm p-400">
-  <gcds-grid tag="article" columns="1fr" gap="300">
+  <gcds-grid tag="article" columns="1fr">
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
   </gcds-grid>
 </div>
 
 {% viewCode "en" "preview-grid-flexible" "gcds-grid" %}
-  <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-  </gcds-grid>
+<gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr">
+
+<p>This is some example content to display the grid component.</p>
+<p>This is some example content to display the grid component.</p>
+<p>This is some example content to display the grid component.</p>
+</gcds-grid>
 {% endviewCode %}
 
 Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size.
@@ -93,7 +87,7 @@ Set the minimum and maximum width to design equal-width columns with restriction
 Desktop
 
 <div class="showcase-preview b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+  <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))">
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
     <p>This is some example content to display the grid component.</p>
@@ -104,7 +98,7 @@ Tablet
 
 <div class="showcase-preview b-sm mb-400 p-400">
   <div class="container-md">
-    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))">
       <p>This is some example content to display the grid component.</p>
       <p>This is some example content to display the grid component.</p>
       <p>This is some example content to display the grid component.</p>
@@ -116,7 +110,7 @@ Mobile
 
 <div class="showcase-preview b-sm p-400">
   <div class="container-sm">
-    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))">
       <p>This is some example content to display the grid component.</p>
       <p>This is some example content to display the grid component.</p>
       <p>This is some example content to display the grid component.</p>
@@ -125,11 +119,12 @@ Mobile
 </div>
 
 {% viewCode "en" "preview-grid-fixed-width" "gcds-grid" %}
-  <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-  </gcds-grid>
+<gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))">
+
+<p>This is some example content to display the grid component.</p>
+<p>This is some example content to display the grid component.</p>
+<p>This is some example content to display the grid component.</p>
+</gcds-grid>
 {% endviewCode %}
 
 {% include "partials/getcode.njk" %}

src/en/components/grid/design.md

@@ -11,7 +11,6 @@ date: 'git Last Modified'
 <ol class="anatomy-list">
   <li>The <strong>container</strong> holds all elements within the grid and spans their combined width. The container is  responsive and can be centred.</li>
   <li>The <strong>column</strong>, also called grid item, sets a boundary around its contents to contain it within the width set for that column.</li>
-  <li>The <strong>gap</strong>, sometimes called the gutter, defines the width of the space between the columns.</li>
 </ol>
 
 <img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-grid-anatomy.svg" alt="Image showing the grid anatomy with four separate rectangles representing the columns of a grid" />
@@ -34,12 +33,6 @@ Tip: Keep grid layouts simple by designing for mobile, tablet, and desktop exper
 - Limit column width to stop large screens from displaying lines of text that are overly long and difficult to read.
 - Avoid exceeding the maximum width of 71.25rem (1140px) wide.
 
-### Add spacing between columns
-
-- Add space between columns to reduce the cognitive load of reading content too densely packed together.
-- Whenever possible, align objects both vertically and horizontally.
-- Select the gap size, or space between columns, by choosing a measurement option from our <gcds-link href="{{ links.spacing }}">spacing tokens</gcds-link>.
-
 ### Communicate meaning by adjusting spacing
 
 Choose spacing to support ease of reading and help users better understand the messages your communicating.

src/fr/composants/grille/base.md

@@ -16,7 +16,7 @@ Une grille est une mise en page réactive et flexible.
 {% enddocLinks %}
 
 {% componentPreview "Aperçu du composant de grille" %}
-<gcds-grid tag="article" columns-desktop="1fr 1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="500">
+<gcds-grid tag="article" columns-desktop="1fr 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>

src/fr/composants/grille/code.md

@@ -25,13 +25,6 @@ Utilisez des grilles pour créer des mises en page flexibles et réactives pour
 
 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.
 
-### Ajoutez un espacement entre les colonnes
-
-- Ajoutez de l'espace entre les colonnes pour réduire la charge cognitive liée à la lecture d'un contenu trop dense.
-- Dans la mesure du possible, alignez les objets verticalement et horizontalement.
-- Utilisez la propriété `gap` pour ajouter de l'espacement entre vos `columns` dans la grille.
-- Utilisez les <gcds-link href="{{ links.designTokens }}">unités de style</gcds-link> 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`.
-
 ### Veillez à l'accessibilité en utilisant des balises standards
 
 La propriété `tag` utilise une balise `div` par défaut.
@@ -48,7 +41,7 @@ Désactivez la définition de la largeur minimale et de la largeur maximale lors
 Ordinateur de bureau
 
 <div class="b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
+  <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>
@@ -58,7 +51,7 @@ Ordinateur de bureau
 Tablette
 
 <div class="b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns-tablet="1fr 1fr" columns="1fr" gap="300">
+  <gcds-grid tag="article" 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>
@@ -68,19 +61,20 @@ Tablette
 Mobile
 
 <div class="b-sm p-400">
-  <gcds-grid tag="article" columns="1fr" gap="300">
+  <gcds-grid tag="article" 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>
 </div>
 
 {% viewCode "fr" "preview-grid-flexible" "gcds-grid" %}
-  <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
-    <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>
+<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>
 {% endviewCode %}
 
 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.
@@ -93,7 +87,7 @@ Définissez la largeur minimale et la largeur maximale pour concevoir des colonn
 Ordinateur de bureau
 
 <div class="showcase-preview b-sm mb-400 p-400">
-  <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+  <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>
@@ -104,7 +98,7 @@ Tablette
 
 <div class="showcase-preview b-sm mb-400 p-400">
   <div class="container-md">
-    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+    <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>
@@ -116,7 +110,7 @@ Mobile
 
 <div class="showcase-preview b-sm p-400">
   <div class="container-sm">
-    <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
+    <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>
@@ -125,11 +119,12 @@ Mobile
 </div>
 
 {% viewCode "fr" "preview-grid-fixed-width" "gcds-grid" %}
-  <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
-    <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>
+<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>
 {% endviewCode %}
 
 {% include "partials/getcode.njk" %}

src/fr/composants/grille/design.md

@@ -11,7 +11,6 @@ date: 'git Last Modified'
 <ol class="anatomy-list">
   <li>La <strong>boîte</strong> contient tous les éléments de la grille et s'étend sur leur largeur combinée. Elle est réactive et peut être centrée.</li>
   <li>La <strong>colonne</strong> , également appelée élément de grille, définit une limite autour de son contenu pour le maintenir dans la largeur définie pour cette colonne.</li>
-  <li>L'<strong>écart</strong> , parfois appelé gouttière, définit la largeur de l'espace entre les colonnes.</li>
 </ol>
 
 <img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-grid-anatomy.svg" alt="Image montrant la structure d'une grille avec quatre rectangles distincts représentant les colonnes d'une grille." />
@@ -34,12 +33,6 @@ Conseil : Visez la simplicité pour la disposition des grilles en concevant des
 - Limitez la largeur des colonnes pour éviter que les grands écrans n'affichent des lignes de texte trop longues et difficiles à lire.
 - Évitez de dépasser la largeur maximale de 71,25 rem (1140 px).
 
-### Ajoutez un espacement entre les colonnes
-
-- Ajoutez de l'espace entre les colonnes pour réduire la charge cognitive liée à la lecture d'un contenu trop dense.
-- Dans la mesure du possible, alignez les objets verticalement et horizontalement.
-- Sélectionnez la taille de l'écart, ou l'espacement entre les colonnes, en choisissant une option de mesure parmi nos <gcds-link href="{{ links.spacing }}">unités d'espacement</gcds-link>.
-
 ### Utilisez l'espacement pour véhiculer un sens particulier
 
 Choisissez l'espacement pour faciliter la lecture et aider les utilisateurs à mieux comprendre les messages que vous communiquez.