diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
index c5bfafb9f8..71f73128a9 100644
--- a/packages/web-twig/src/Resources/components/Grid/README.md
+++ b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -99,12 +99,21 @@ Custom vertical (y-axis) spacing:
 ## Item Alignment
 
 The `alignmentX` and `alignmentY` props are used to control the alignment of items within a container.
+The available values for these properties can be found in our [alignment dictionary][alignment-dictionary].
 
 `alignmentX`: Manages horizontal alignment, allowing you to position items to the left, center, or right of the container. It can also be configured with responsive values for different breakpoints.
 `alignmentY`: Manages vertical alignment, enabling you to position items at the top, center, or bottom of the container. It supports responsive values for various breakpoints as well.
 
 Both props can be set using either fixed values or objects with breakpoint-specific settings to ensure the alignment adapts across different screen sizes.
 
+Horizontal Alignment:
+
+```twig
+<Grid alignmentX="left">
+  <!-- Grid content -->
+</Grid>
+```
+
 Horizontal and Vertical Alignment:
 
 ```twig
@@ -128,8 +137,8 @@ Responsive Horizontal and Vertical Alignment:
 
 | Name          | Type                                                         | Default | Required | Description                                                                                                                             |
 | ------------- | ------------------------------------------------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `alignmentX`  | [`left` \| `center` \| `right` \| `object`]                  | `null`  | ✕        | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }`   |
-| `alignmentY`  | [`top` \| `center` \| `bottom` \| `object`]                  | `null`  | ✕        | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` |
+| `alignmentX`  | [`stretch` \| `left` \| `center` \| `right` \| `object`]     | `null`  | ✕        | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }`   |
+| `alignmentY`  | [`stretch` \| `top` \| `center` \| `bottom` \| `object`]     | `null`  | ✕        | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` |
 | `cols`        | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | `null`  | ✕        | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }`                              |
 | `elementType` | `string`                                                     | `div`   | ✕        | HTML tag to render                                                                                                                      |
 | `spacing`     | [`spacing token` \| `object`]                                | `null`  | ✕        | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items                                        |
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig
index abb529c5eb..23eea77aa4 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridAlignment.twig
@@ -1,35 +1,40 @@
 <Grid cols="2">
-    <GridItem UNSAFE_className="bg-cover">
-        <DocsBox size="small">Stretch (default)<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
-        <DocsBox size="small">Stretch (default)</DocsBox>
-    </GridItem>
+    <DocsBox size="small">Normal (default)<br/>…</DocsBox>
+    <DocsBox size="small">Normal (default)</DocsBox>
 </Grid>
 
-<Grid cols="2" alignmentX="left" alignmentY="top">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2">
+    <Grid cols="1" alignmentX="stretch" alignmentY="stretch" UNSAFE_className="bg-cover">
+        <DocsBox size="small">Stretch<br/>…</DocsBox>
+    </Grid>
+    <Grid cols="1" alignmentX="stretch" alignmentY="stretch" UNSAFE_className="bg-cover">
+        <DocsBox size="small">Stretch</DocsBox>
+    </Grid>
+</Grid>
+
+<Grid cols="2">
+    <Grid cols="1" alignmentX="left" alignmentY="top" UNSAFE_className="bg-cover">
         <DocsBox size="small">Left<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="left" alignmentY="top" UNSAFE_className="bg-cover">
         <DocsBox size="small">Top</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
 
-<Grid cols="2" alignmentX="center" alignmentY="center">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2" >
+    <Grid cols="1" alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
         <DocsBox size="small">Center<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
         <DocsBox size="small">Center</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
 
-<Grid cols="2" alignmentX="right" alignmentY="bottom">
-    <GridItem UNSAFE_className="bg-cover">
+<Grid cols="2">
+    <Grid cols="1" alignmentX="right" alignmentY="bottom" UNSAFE_className="bg-cover">
         <DocsBox size="small">Right<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid cols="1" alignmentX="right" alignmentY="bottom" UNSAFE_className="bg-cover">
         <DocsBox size="small">Bottom</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig
index c6a84c4db0..fa23b51f09 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveAlignment.twig
@@ -1,11 +1,19 @@
 <Grid cols="2"
-    alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
-    alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}"
 >
-    <GridItem UNSAFE_className="bg-cover">
+    <Grid 
+        cols="1" 
+        alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
+        alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}" 
+        UNSAFE_className="bg-cover"
+    >
         <DocsBox size="small">Horizontal Alignment<br/>…</DocsBox>
-    </GridItem>
-    <GridItem UNSAFE_className="bg-cover">
+    </Grid>
+    <Grid 
+        cols="1" 
+        alignmentX="{{ { mobile: 'left', tablet: 'center', desktop: 'right' } }}" 
+        alignmentY="{{ { mobile: 'top', tablet: 'center', desktop: 'bottom' } }}" 
+        UNSAFE_className="bg-cover"
+    >
         <DocsBox size="small">Vertical Alignment</DocsBox>
-    </GridItem>
+    </Grid>
 </Grid>