diff --git a/src/en/components/grid/base.md b/src/en/components/grid/base.md
index 6e4c3acf1..556d911cb 100644
--- a/src/en/components/grid/base.md
+++ b/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>
diff --git a/src/en/components/grid/code.md b/src/en/components/grid/code.md
index 217522a49..a5e014794 100644
--- a/src/en/components/grid/code.md
+++ b/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,7 +61,7 @@ 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>
@@ -76,11 +69,12 @@ Mobile
 </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" %}
diff --git a/src/en/components/grid/design.md b/src/en/components/grid/design.md
index 1edb6dbf9..1a32dee6e 100644
--- a/src/en/components/grid/design.md
+++ b/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.
diff --git a/src/fr/composants/grille/base.md b/src/fr/composants/grille/base.md
index 3a4844791..c9498e0c6 100644
--- a/src/fr/composants/grille/base.md
+++ b/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>
diff --git a/src/fr/composants/grille/code.md b/src/fr/composants/grille/code.md
index e3f7396e9..73b8597aa 100644
--- a/src/fr/composants/grille/code.md
+++ b/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,7 +61,7 @@ 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>
@@ -76,11 +69,12 @@ Mobile
 </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" %}
diff --git a/src/fr/composants/grille/design.md b/src/fr/composants/grille/design.md
index 99171949d..a2dcbe25f 100644
--- a/src/fr/composants/grille/design.md
+++ b/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.
diff --git a/src/images/en/components/anatomy/gcds-grid-anatomy.svg b/src/images/en/components/anatomy/gcds-grid-anatomy.svg
index bc11af32a..cc53fc23c 100644
--- a/src/images/en/components/anatomy/gcds-grid-anatomy.svg
+++ b/src/images/en/components/anatomy/gcds-grid-anatomy.svg
@@ -1,70 +1,147 @@
-<svg width="1009" height="311" viewBox="0 0 1009 311" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_10707_412)">
-<rect width="1009" height="80" transform="translate(0 111)" fill="white"/>
-<mask id="path-1-inside-1_10707_412" fill="white">
-<path d="M0 111H241V191H0V111Z"/>
-</mask>
-<path d="M0 111H241V191H0V111Z" fill="#FAEDD1"/>
-<path d="M237 111V191H245V111H237ZM4 191V111H-4V191H4Z" fill="#B3800F" mask="url(#path-1-inside-1_10707_412)"/>
-<mask id="path-3-inside-2_10707_412" fill="white">
-<path d="M256 111H497V191H256V111Z"/>
-</mask>
-<path d="M256 111H497V191H256V111Z" fill="#FAEDD1"/>
-<path d="M493 111V191H501V111H493ZM260 191V111H252V191H260Z" fill="#B3800F" mask="url(#path-3-inside-2_10707_412)"/>
-<mask id="path-5-inside-3_10707_412" fill="white">
-<path d="M512 111H753V191H512V111Z"/>
-</mask>
-<path d="M512 111H753V191H512V111Z" fill="#FAEDD1"/>
-<path d="M749 111V191H757V111H749ZM516 191V111H508V191H516Z" fill="#B3800F" mask="url(#path-5-inside-3_10707_412)"/>
-<mask id="path-7-inside-4_10707_412" fill="white">
-<path d="M768 111H1009V191H768V111Z"/>
-</mask>
-<path d="M768 111H1009V191H768V111Z" fill="#FAEDD1"/>
-<path d="M1005 111V191H1013V111H1005ZM772 191V111H764V191H772Z" fill="#B3800F" mask="url(#path-7-inside-4_10707_412)"/>
-</g>
-<g clip-path="url(#clip1_10707_412)">
-<rect x="748" y="265" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M759.975 282.139C759.232 282.139 758.571 282.012 757.991 281.756C757.414 281.498 756.958 281.143 756.624 280.692C756.292 280.238 756.122 279.715 756.112 279.121H758.279C758.292 279.37 758.374 279.589 758.523 279.778C758.675 279.963 758.877 280.107 759.129 280.21C759.381 280.313 759.665 280.364 759.979 280.364C760.308 280.364 760.598 280.306 760.85 280.19C761.101 280.074 761.299 279.914 761.441 279.708C761.584 279.503 761.655 279.266 761.655 278.997C761.655 278.725 761.579 278.485 761.426 278.276C761.277 278.064 761.062 277.898 760.78 277.779C760.502 277.66 760.17 277.6 759.786 277.6H758.836V276.019H759.786C760.11 276.019 760.397 275.963 760.646 275.85C760.898 275.737 761.093 275.582 761.232 275.383C761.372 275.181 761.441 274.945 761.441 274.677C761.441 274.422 761.38 274.198 761.257 274.006C761.138 273.81 760.969 273.658 760.75 273.548C760.535 273.439 760.283 273.384 759.994 273.384C759.703 273.384 759.436 273.437 759.194 273.543C758.952 273.646 758.758 273.794 758.612 273.986C758.466 274.178 758.389 274.403 758.379 274.662H756.315C756.325 274.075 756.493 273.558 756.818 273.111C757.142 272.663 757.58 272.314 758.13 272.062C758.684 271.807 759.308 271.679 760.004 271.679C760.707 271.679 761.322 271.807 761.849 272.062C762.376 272.317 762.785 272.662 763.077 273.096C763.372 273.527 763.518 274.011 763.514 274.548C763.518 275.118 763.34 275.593 762.982 275.974C762.628 276.356 762.165 276.598 761.595 276.7V276.78C762.344 276.876 762.914 277.136 763.305 277.56C763.7 277.981 763.895 278.508 763.892 279.141C763.895 279.721 763.728 280.237 763.39 280.688C763.055 281.138 762.593 281.493 762.003 281.751C761.413 282.01 760.737 282.139 759.975 282.139Z" fill="white"/>
-</g>
-<rect width="54" height="1" transform="matrix(-4.18317e-05 1 -1 0 761 214)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(4.19191e-05 -1 1 8.74685e-08 770.991 215)" fill="#C54600"/>
-<rect width="22" height="1" transform="matrix(1 1.74846e-07 4.16568e-05 1 748.999 214)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(4.19191e-05 -1 1 8.74685e-08 748.998 215)" fill="#C54600"/>
-<g clip-path="url(#clip2_10707_412)">
-<rect x="120" y="191" width="1" height="95" fill="#C54600"/>
-<g clip-path="url(#clip3_10707_412)">
-<rect x="108" y="266" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M116.416 283V281.449L120.04 278.093C120.349 277.795 120.607 277.526 120.816 277.288C121.028 277.049 121.189 276.815 121.298 276.587C121.408 276.355 121.462 276.104 121.462 275.836C121.462 275.538 121.394 275.281 121.258 275.065C121.123 274.847 120.937 274.679 120.702 274.563C120.466 274.444 120.199 274.384 119.901 274.384C119.59 274.384 119.318 274.447 119.086 274.573C118.854 274.699 118.675 274.88 118.549 275.115C118.423 275.35 118.36 275.63 118.36 275.955H116.317C116.317 275.289 116.467 274.711 116.769 274.22C117.071 273.73 117.493 273.35 118.037 273.082C118.58 272.813 119.207 272.679 119.916 272.679C120.645 272.679 121.28 272.808 121.82 273.067C122.364 273.322 122.786 273.677 123.088 274.131C123.39 274.585 123.54 275.105 123.54 275.692C123.54 276.076 123.464 276.456 123.312 276.83C123.163 277.205 122.896 277.621 122.511 278.078C122.127 278.532 121.585 279.077 120.886 279.714L119.399 281.17V281.24H123.675V283H116.416Z" fill="white"/>
-</g>
-</g>
-<g clip-path="url(#clip4_10707_412)">
-<rect width="14" height="1" transform="matrix(-4.18317e-05 1 -1 0 1009 87)" fill="#C54600"/>
-<rect width="1009" height="1" transform="matrix(-1 -8.74228e-08 -4.17442e-05 -1 1009 88)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(-4.18317e-05 1 -1 0 1 87)" fill="#C54600"/>
-<rect width="70" height="1" transform="matrix(-4.18317e-05 1 -1 0 505 18)" fill="#C54600"/>
-<g clip-path="url(#clip5_10707_412)">
-<rect x="492" y="14" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M505.83 20.8182V31H503.677V22.8615H503.618L501.286 24.3232V22.4141L503.807 20.8182H505.83Z" fill="white"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_10707_412">
-<rect width="1009" height="80" fill="white" transform="translate(0 111)"/>
-</clipPath>
-<clipPath id="clip1_10707_412">
-<rect x="748" y="265" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-<clipPath id="clip2_10707_412">
-<rect width="24" height="99" fill="white" transform="translate(108 191)"/>
-</clipPath>
-<clipPath id="clip3_10707_412">
-<rect x="108" y="266" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-<clipPath id="clip4_10707_412">
-<rect width="1009" height="111" fill="white"/>
-</clipPath>
-<clipPath id="clip5_10707_412">
-<rect x="492" y="14" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1009 311">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
+        stroke-width: 0px;
+      }
+
+      .cls-3 {
+        fill: #faedd1;
+      }
+
+      .cls-7 {
+        mask: url(#mask);
+      }
+
+      .cls-8 {
+        clip-path: url(#clippath-4);
+      }
+
+      .cls-9 {
+        clip-path: url(#clippath-3);
+      }
+
+      .cls-10 {
+        clip-path: url(#clippath-2);
+      }
+
+      .cls-11 {
+        clip-path: url(#clippath-5);
+      }
+
+      .cls-4 {
+        fill: #b3800f;
+      }
+
+      .cls-5 {
+        fill: #c54600;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+
+      .cls-12 {
+        mask: url(#mask-3);
+      }
+
+      .cls-13 {
+        mask: url(#mask-2);
+      }
+
+      .cls-14 {
+        mask: url(#mask-1);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-2" y="111" width="1009" height="80"/>
+    </clipPath>
+    <mask id="mask" x="-4" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-1-inside-1_10707_412" data-name="path-1-inside-1 10707 412">
+        <path class="cls-6" d="M0,111h241v80H0v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-1" x="252" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-3-inside-2_10707_412" data-name="path-3-inside-2 10707 412">
+        <path class="cls-6" d="M256,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-2" x="508" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-5-inside-3_10707_412" data-name="path-5-inside-3 10707 412">
+        <path class="cls-6" d="M512,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-3" x="764" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-7-inside-4_10707_412" data-name="path-7-inside-4 10707 412">
+        <path class="cls-6" d="M768,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <clipPath id="clippath-2">
+      <rect class="cls-2" x="108" y="191" width="24" height="99"/>
+    </clipPath>
+    <clipPath id="clippath-3">
+      <path class="cls-2" d="M120,266h0c6.6,0,12,5.4,12,12s-5.4,12-12,12-12-5.4-12-12,5.4-12,12-12Z"/>
+    </clipPath>
+    <clipPath id="clippath-4">
+      <rect class="cls-2" y="0" width="1009" height="111"/>
+    </clipPath>
+    <clipPath id="clippath-5">
+      <path class="cls-2" d="M504,14h0c6.6,0,12,5.4,12,12s-5.4,12-12,12-12-5.4-12-12,5.4-12,12-12Z"/>
+    </clipPath>
+  </defs>
+  <g class="cls-1">
+    <g>
+      <rect class="cls-6" y="111" width="1009" height="80"/>
+      <path class="cls-3" d="M0,111h241v80H0v-80Z"/>
+      <g class="cls-7">
+        <path class="cls-4" d="M237,111v80h8v-80h-8ZM4,191v-80H-4v80H4Z"/>
+      </g>
+      <path class="cls-3" d="M256,111h241v80h-241v-80Z"/>
+      <g class="cls-14">
+        <path class="cls-4" d="M493,111v80h8v-80h-8ZM260,191v-80h-8v80h8Z"/>
+      </g>
+      <path class="cls-3" d="M512,111h241v80h-241v-80Z"/>
+      <g class="cls-13">
+        <path class="cls-4" d="M749,111v80h8v-80h-8ZM516,191v-80h-8v80h8Z"/>
+      </g>
+      <path class="cls-3" d="M768,111h241v80h-241v-80Z"/>
+      <g class="cls-12">
+        <path class="cls-4" d="M1005,111v80h8v-80h-8ZM772,191v-80h-8v80h8Z"/>
+      </g>
+    </g>
+  </g>
+  <g class="cls-10">
+    <g>
+      <rect class="cls-5" x="120" y="191" width="1" height="95"/>
+      <g class="cls-9">
+        <g>
+          <path class="cls-5" d="M120,266h0c6.6,0,12,5.4,12,12h0c0,6.6-5.4,12-12,12h0c-6.6,0-12-5.4-12-12h0c0-6.6,5.4-12,12-12Z"/>
+          <path class="cls-6" d="M116.4,283v-1.6l3.6-3.4c.3-.3.6-.6.8-.8.2-.2.4-.5.5-.7.1-.2.2-.5.2-.8s0-.6-.2-.8c-.1-.2-.3-.4-.6-.5-.2-.1-.5-.2-.8-.2s-.6,0-.8.2-.4.3-.5.5c-.1.2-.2.5-.2.8h-2c0-.7.2-1.2.5-1.7.3-.5.7-.9,1.3-1.1.5-.3,1.2-.4,1.9-.4s1.4.1,1.9.4c.5.3,1,.6,1.3,1.1.3.5.5,1,.5,1.6s0,.8-.2,1.1c-.1.4-.4.8-.8,1.2-.4.5-.9,1-1.6,1.6l-1.5,1.5h0c0,0,4.3,0,4.3,0v1.8h-7.3Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g class="cls-8">
+    <g>
+      <rect class="cls-5" x="1008" y="87" width="1" height="14"/>
+      <rect class="cls-5" x="0" y="87" width="1009" height="1"/>
+      <rect class="cls-5" x="0" y="87" width="1" height="14"/>
+      <rect class="cls-5" x="504" y="18" width="1" height="70"/>
+      <g class="cls-11">
+        <g>
+          <path class="cls-5" d="M504,14h0c6.6,0,12,5.4,12,12h0c0,6.6-5.4,12-12,12h0c-6.6,0-12-5.4-12-12h0c0-6.6,5.4-12,12-12Z"/>
+          <path class="cls-6" d="M505.8,20.8v10.2h-2.2v-8.1h0l-2.3,1.5v-1.9l2.5-1.6h2Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/fr/components/anatomy/gcds-grid-anatomy.svg b/src/images/fr/components/anatomy/gcds-grid-anatomy.svg
index bc11af32a..cc53fc23c 100644
--- a/src/images/fr/components/anatomy/gcds-grid-anatomy.svg
+++ b/src/images/fr/components/anatomy/gcds-grid-anatomy.svg
@@ -1,70 +1,147 @@
-<svg width="1009" height="311" viewBox="0 0 1009 311" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_10707_412)">
-<rect width="1009" height="80" transform="translate(0 111)" fill="white"/>
-<mask id="path-1-inside-1_10707_412" fill="white">
-<path d="M0 111H241V191H0V111Z"/>
-</mask>
-<path d="M0 111H241V191H0V111Z" fill="#FAEDD1"/>
-<path d="M237 111V191H245V111H237ZM4 191V111H-4V191H4Z" fill="#B3800F" mask="url(#path-1-inside-1_10707_412)"/>
-<mask id="path-3-inside-2_10707_412" fill="white">
-<path d="M256 111H497V191H256V111Z"/>
-</mask>
-<path d="M256 111H497V191H256V111Z" fill="#FAEDD1"/>
-<path d="M493 111V191H501V111H493ZM260 191V111H252V191H260Z" fill="#B3800F" mask="url(#path-3-inside-2_10707_412)"/>
-<mask id="path-5-inside-3_10707_412" fill="white">
-<path d="M512 111H753V191H512V111Z"/>
-</mask>
-<path d="M512 111H753V191H512V111Z" fill="#FAEDD1"/>
-<path d="M749 111V191H757V111H749ZM516 191V111H508V191H516Z" fill="#B3800F" mask="url(#path-5-inside-3_10707_412)"/>
-<mask id="path-7-inside-4_10707_412" fill="white">
-<path d="M768 111H1009V191H768V111Z"/>
-</mask>
-<path d="M768 111H1009V191H768V111Z" fill="#FAEDD1"/>
-<path d="M1005 111V191H1013V111H1005ZM772 191V111H764V191H772Z" fill="#B3800F" mask="url(#path-7-inside-4_10707_412)"/>
-</g>
-<g clip-path="url(#clip1_10707_412)">
-<rect x="748" y="265" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M759.975 282.139C759.232 282.139 758.571 282.012 757.991 281.756C757.414 281.498 756.958 281.143 756.624 280.692C756.292 280.238 756.122 279.715 756.112 279.121H758.279C758.292 279.37 758.374 279.589 758.523 279.778C758.675 279.963 758.877 280.107 759.129 280.21C759.381 280.313 759.665 280.364 759.979 280.364C760.308 280.364 760.598 280.306 760.85 280.19C761.101 280.074 761.299 279.914 761.441 279.708C761.584 279.503 761.655 279.266 761.655 278.997C761.655 278.725 761.579 278.485 761.426 278.276C761.277 278.064 761.062 277.898 760.78 277.779C760.502 277.66 760.17 277.6 759.786 277.6H758.836V276.019H759.786C760.11 276.019 760.397 275.963 760.646 275.85C760.898 275.737 761.093 275.582 761.232 275.383C761.372 275.181 761.441 274.945 761.441 274.677C761.441 274.422 761.38 274.198 761.257 274.006C761.138 273.81 760.969 273.658 760.75 273.548C760.535 273.439 760.283 273.384 759.994 273.384C759.703 273.384 759.436 273.437 759.194 273.543C758.952 273.646 758.758 273.794 758.612 273.986C758.466 274.178 758.389 274.403 758.379 274.662H756.315C756.325 274.075 756.493 273.558 756.818 273.111C757.142 272.663 757.58 272.314 758.13 272.062C758.684 271.807 759.308 271.679 760.004 271.679C760.707 271.679 761.322 271.807 761.849 272.062C762.376 272.317 762.785 272.662 763.077 273.096C763.372 273.527 763.518 274.011 763.514 274.548C763.518 275.118 763.34 275.593 762.982 275.974C762.628 276.356 762.165 276.598 761.595 276.7V276.78C762.344 276.876 762.914 277.136 763.305 277.56C763.7 277.981 763.895 278.508 763.892 279.141C763.895 279.721 763.728 280.237 763.39 280.688C763.055 281.138 762.593 281.493 762.003 281.751C761.413 282.01 760.737 282.139 759.975 282.139Z" fill="white"/>
-</g>
-<rect width="54" height="1" transform="matrix(-4.18317e-05 1 -1 0 761 214)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(4.19191e-05 -1 1 8.74685e-08 770.991 215)" fill="#C54600"/>
-<rect width="22" height="1" transform="matrix(1 1.74846e-07 4.16568e-05 1 748.999 214)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(4.19191e-05 -1 1 8.74685e-08 748.998 215)" fill="#C54600"/>
-<g clip-path="url(#clip2_10707_412)">
-<rect x="120" y="191" width="1" height="95" fill="#C54600"/>
-<g clip-path="url(#clip3_10707_412)">
-<rect x="108" y="266" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M116.416 283V281.449L120.04 278.093C120.349 277.795 120.607 277.526 120.816 277.288C121.028 277.049 121.189 276.815 121.298 276.587C121.408 276.355 121.462 276.104 121.462 275.836C121.462 275.538 121.394 275.281 121.258 275.065C121.123 274.847 120.937 274.679 120.702 274.563C120.466 274.444 120.199 274.384 119.901 274.384C119.59 274.384 119.318 274.447 119.086 274.573C118.854 274.699 118.675 274.88 118.549 275.115C118.423 275.35 118.36 275.63 118.36 275.955H116.317C116.317 275.289 116.467 274.711 116.769 274.22C117.071 273.73 117.493 273.35 118.037 273.082C118.58 272.813 119.207 272.679 119.916 272.679C120.645 272.679 121.28 272.808 121.82 273.067C122.364 273.322 122.786 273.677 123.088 274.131C123.39 274.585 123.54 275.105 123.54 275.692C123.54 276.076 123.464 276.456 123.312 276.83C123.163 277.205 122.896 277.621 122.511 278.078C122.127 278.532 121.585 279.077 120.886 279.714L119.399 281.17V281.24H123.675V283H116.416Z" fill="white"/>
-</g>
-</g>
-<g clip-path="url(#clip4_10707_412)">
-<rect width="14" height="1" transform="matrix(-4.18317e-05 1 -1 0 1009 87)" fill="#C54600"/>
-<rect width="1009" height="1" transform="matrix(-1 -8.74228e-08 -4.17442e-05 -1 1009 88)" fill="#C54600"/>
-<rect width="14" height="1" transform="matrix(-4.18317e-05 1 -1 0 1 87)" fill="#C54600"/>
-<rect width="70" height="1" transform="matrix(-4.18317e-05 1 -1 0 505 18)" fill="#C54600"/>
-<g clip-path="url(#clip5_10707_412)">
-<rect x="492" y="14" width="24" height="24" rx="12" fill="#C54600"/>
-<path d="M505.83 20.8182V31H503.677V22.8615H503.618L501.286 24.3232V22.4141L503.807 20.8182H505.83Z" fill="white"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_10707_412">
-<rect width="1009" height="80" fill="white" transform="translate(0 111)"/>
-</clipPath>
-<clipPath id="clip1_10707_412">
-<rect x="748" y="265" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-<clipPath id="clip2_10707_412">
-<rect width="24" height="99" fill="white" transform="translate(108 191)"/>
-</clipPath>
-<clipPath id="clip3_10707_412">
-<rect x="108" y="266" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-<clipPath id="clip4_10707_412">
-<rect width="1009" height="111" fill="white"/>
-</clipPath>
-<clipPath id="clip5_10707_412">
-<rect x="492" y="14" width="24" height="24" rx="12" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1009 311">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
+        stroke-width: 0px;
+      }
+
+      .cls-3 {
+        fill: #faedd1;
+      }
+
+      .cls-7 {
+        mask: url(#mask);
+      }
+
+      .cls-8 {
+        clip-path: url(#clippath-4);
+      }
+
+      .cls-9 {
+        clip-path: url(#clippath-3);
+      }
+
+      .cls-10 {
+        clip-path: url(#clippath-2);
+      }
+
+      .cls-11 {
+        clip-path: url(#clippath-5);
+      }
+
+      .cls-4 {
+        fill: #b3800f;
+      }
+
+      .cls-5 {
+        fill: #c54600;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+
+      .cls-12 {
+        mask: url(#mask-3);
+      }
+
+      .cls-13 {
+        mask: url(#mask-2);
+      }
+
+      .cls-14 {
+        mask: url(#mask-1);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-2" y="111" width="1009" height="80"/>
+    </clipPath>
+    <mask id="mask" x="-4" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-1-inside-1_10707_412" data-name="path-1-inside-1 10707 412">
+        <path class="cls-6" d="M0,111h241v80H0v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-1" x="252" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-3-inside-2_10707_412" data-name="path-3-inside-2 10707 412">
+        <path class="cls-6" d="M256,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-2" x="508" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-5-inside-3_10707_412" data-name="path-5-inside-3 10707 412">
+        <path class="cls-6" d="M512,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <mask id="mask-3" x="764" y="111" width="249" height="80" maskUnits="userSpaceOnUse">
+      <g id="path-7-inside-4_10707_412" data-name="path-7-inside-4 10707 412">
+        <path class="cls-6" d="M768,111h241v80h-241v-80Z"/>
+      </g>
+    </mask>
+    <clipPath id="clippath-2">
+      <rect class="cls-2" x="108" y="191" width="24" height="99"/>
+    </clipPath>
+    <clipPath id="clippath-3">
+      <path class="cls-2" d="M120,266h0c6.6,0,12,5.4,12,12s-5.4,12-12,12-12-5.4-12-12,5.4-12,12-12Z"/>
+    </clipPath>
+    <clipPath id="clippath-4">
+      <rect class="cls-2" y="0" width="1009" height="111"/>
+    </clipPath>
+    <clipPath id="clippath-5">
+      <path class="cls-2" d="M504,14h0c6.6,0,12,5.4,12,12s-5.4,12-12,12-12-5.4-12-12,5.4-12,12-12Z"/>
+    </clipPath>
+  </defs>
+  <g class="cls-1">
+    <g>
+      <rect class="cls-6" y="111" width="1009" height="80"/>
+      <path class="cls-3" d="M0,111h241v80H0v-80Z"/>
+      <g class="cls-7">
+        <path class="cls-4" d="M237,111v80h8v-80h-8ZM4,191v-80H-4v80H4Z"/>
+      </g>
+      <path class="cls-3" d="M256,111h241v80h-241v-80Z"/>
+      <g class="cls-14">
+        <path class="cls-4" d="M493,111v80h8v-80h-8ZM260,191v-80h-8v80h8Z"/>
+      </g>
+      <path class="cls-3" d="M512,111h241v80h-241v-80Z"/>
+      <g class="cls-13">
+        <path class="cls-4" d="M749,111v80h8v-80h-8ZM516,191v-80h-8v80h8Z"/>
+      </g>
+      <path class="cls-3" d="M768,111h241v80h-241v-80Z"/>
+      <g class="cls-12">
+        <path class="cls-4" d="M1005,111v80h8v-80h-8ZM772,191v-80h-8v80h8Z"/>
+      </g>
+    </g>
+  </g>
+  <g class="cls-10">
+    <g>
+      <rect class="cls-5" x="120" y="191" width="1" height="95"/>
+      <g class="cls-9">
+        <g>
+          <path class="cls-5" d="M120,266h0c6.6,0,12,5.4,12,12h0c0,6.6-5.4,12-12,12h0c-6.6,0-12-5.4-12-12h0c0-6.6,5.4-12,12-12Z"/>
+          <path class="cls-6" d="M116.4,283v-1.6l3.6-3.4c.3-.3.6-.6.8-.8.2-.2.4-.5.5-.7.1-.2.2-.5.2-.8s0-.6-.2-.8c-.1-.2-.3-.4-.6-.5-.2-.1-.5-.2-.8-.2s-.6,0-.8.2-.4.3-.5.5c-.1.2-.2.5-.2.8h-2c0-.7.2-1.2.5-1.7.3-.5.7-.9,1.3-1.1.5-.3,1.2-.4,1.9-.4s1.4.1,1.9.4c.5.3,1,.6,1.3,1.1.3.5.5,1,.5,1.6s0,.8-.2,1.1c-.1.4-.4.8-.8,1.2-.4.5-.9,1-1.6,1.6l-1.5,1.5h0c0,0,4.3,0,4.3,0v1.8h-7.3Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g class="cls-8">
+    <g>
+      <rect class="cls-5" x="1008" y="87" width="1" height="14"/>
+      <rect class="cls-5" x="0" y="87" width="1009" height="1"/>
+      <rect class="cls-5" x="0" y="87" width="1" height="14"/>
+      <rect class="cls-5" x="504" y="18" width="1" height="70"/>
+      <g class="cls-11">
+        <g>
+          <path class="cls-5" d="M504,14h0c6.6,0,12,5.4,12,12h0c0,6.6-5.4,12-12,12h0c-6.6,0-12-5.4-12-12h0c0-6.6,5.4-12,12-12Z"/>
+          <path class="cls-6" d="M505.8,20.8v10.2h-2.2v-8.1h0l-2.3,1.5v-1.9l2.5-1.6h2Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file