diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
index 7d68a393c6..8dd6b52f26 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import DocsBox from '../../../../docs/DocsBox';
 import { PlacementDictionaryType } from '../../../types';
-import { Grid } from '../../Grid';
+import { Grid, GridItem } from '../../Grid';
 import { Radio } from '../../Radio';
 import Tooltip from '../Tooltip';
 import TooltipWrapper from '../TooltipWrapper';
@@ -20,7 +20,7 @@ const TooltipPlacements = () => {
         UNSAFE_className="mx-auto"
         UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '30rem' }}
       >
-        <div style={{ gridRow: 1, gridColumn: 2 }}>
+        <GridItem columnStart={2} rowStart={1}>
           <Radio
             name="placement"
             isChecked={placement === 'top-left'}
@@ -48,8 +48,8 @@ const TooltipPlacements = () => {
             label="top-right"
             value="top-right"
           />
-        </div>
-        <div style={{ gridRow: 3, gridColumn: 2 }}>
+        </GridItem>
+        <GridItem columnStart={2} rowStart={3}>
           <Radio
             name="placement"
             isChecked={placement === 'bottom-left'}
@@ -77,8 +77,12 @@ const TooltipPlacements = () => {
             label="bottom-right"
             value="bottom-right"
           />
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 1, justifySelf: 'start' }}>
+        </GridItem>
+        <GridItem
+          columnStart={1}
+          rowStart={2}
+          UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'start' }}
+        >
           <Radio
             name="placement"
             isChecked={placement === 'left-top'}
@@ -106,8 +110,12 @@ const TooltipPlacements = () => {
             label="left-bottom"
             value="left-bottom"
           />
-        </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 3, justifySelf: 'end' }}>
+        </GridItem>
+        <GridItem
+          columnStart={3}
+          rowStart={2}
+          UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'end' }}
+        >
           <Radio
             name="placement"
             isChecked={placement === 'right-top'}
@@ -135,8 +143,8 @@ const TooltipPlacements = () => {
             label="right-bottom"
             value="right-bottom"
           />
-        </div>
-        <div style={{ gridRow: 2, gridColumn: 2 }}>
+        </GridItem>
+        <GridItem columnStart={2} rowStart={2}>
           <TooltipWrapper UNSAFE_style={{ margin: '5rem auto' }}>
             <DocsBox UNSAFE_className="px-900 py-900">
               Click
@@ -144,7 +152,7 @@ const TooltipPlacements = () => {
             </DocsBox>
             <Tooltip placement={placement as PlacementDictionaryType}>{placement}</Tooltip>
           </TooltipWrapper>
-        </div>
+        </GridItem>
       </Grid>
     </form>
   );
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
index fd79af4ef2..34a47e5a6d 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -1,34 +1,34 @@
 <form autocomplete="off">
     <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
-        <div style="grid-row: 1; grid-column: 2">
+        <GridItem columnStart="2" rowStart="1">
 
             <Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left"/>
             <Radio name="placement" isLabelHidden value="top" id="placement_top" label="top"/>
             <Radio name="placement" isLabelHidden value="topRight" id="placement_top_right" label="top-right"/>
 
-        </div>
-        <div style="grid-row: 3; grid-column: 2">
+        </GridItem>
+        <GridItem columnStart="2" rowStart="3">
 
             <Radio name="placement" isLabelHidden value="bottomLeft" id="placement_bottom_left" label="bottom-left"/>
             <Radio name="placement" isLabelHidden value="bottom" id="placement_bottom" label="bottom" isChecked/>
             <Radio name="placement" isLabelHidden value="bottomRight" id="placement_bottom_right" label="bottom-right"/>
 
-        </div>
-        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
+        </GridItem>
+        <GridItem columnStart="1" rowStart="2" UNSAFE_style="display: flex; flex-direction: column; justify-self: start;">
 
             <Radio name="placement" isLabelHidden value="leftTop" id="placement_left_top" label="left-top"/>
             <Radio name="placement" isLabelHidden value="left" id="placement_left" label="left"/>
             <Radio name="placement" isLabelHidden value="leftBottom" id="placement_left_bottom" label="left-bottom"/>
 
-        </div>
-        <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
+        </GridItem>
+        <GridItem columnStart="3" rowStart="2" UNSAFE_style="display: flex; flex-direction: column; justify-self: end;">
 
             <Radio name="placement" isLabelHidden value="rightTop" id="placement_right_top" label="right-top"/>
             <Radio name="placement" isLabelHidden value="right" id="placement_right" label="right"/>
             <Radio name="placement" isLabelHidden value="rightBottom" id="placement_right_bottom" label="right-bottom"/>
 
-        </div>
-        <div style="grid-row: 2; grid-column: 2">
+        </GridItem>
+        <GridItem columnStart="2" rowStart="2">
 
             <TooltipWrapper UNSAFE_style="margin: 5rem auto">
                 <DocsBox UNSAFE_className="px-900 py-900">Click<br /> the dots!</DocsBox>
@@ -37,9 +37,10 @@
                 </Tooltip>
             </TooltipWrapper>
 
-        </div>
+        </GridItem>
     </Grid>
 </form>
+
 <script>
     const radios = document.querySelectorAll('input[type="radio"]');
 
@@ -47,10 +48,10 @@
         radio.addEventListener('change', () => {
             const placement = radio.value;
             const tooltip = document.getElementById('tooltip_placements_example');
-            const tooltipText = document.getElementById('tooltip_placements_example_text');
+            const placementText = document.getElementById('tooltip_placements_example_text');
 
             tooltip.classList.replace(tooltip.classList[1], `Tooltip--${placement}`);
-            tooltipText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
+            placementText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
         });
     });
 </script>
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
index 2d86b72d67..0bb63a4f9e 100644
--- a/packages/web/src/scss/components/Tooltip/index.html
+++ b/packages/web/src/scss/components/Tooltip/index.html
@@ -8,7 +8,7 @@ <h2 class="docs-Heading">Placements</h2>
 
       <form autocomplete="off">
         <div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
-          <div style="grid-row: 1; grid-column: 2">
+          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">
 
             <label for="placement_top_left" class="Radio">
               <input type="radio" name="placement" value="topLeft" id="placement_top_left" class="Radio__input" />
@@ -30,7 +30,7 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="grid-row: 3; grid-column: 2">
+          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">
 
             <label for="placement_bottom_left" class="Radio">
               <input type="radio" name="placement" value="bottomLeft" id="placement_bottom_left" class="Radio__input" />
@@ -52,7 +52,16 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
+          <div
+            class="GridItem"
+            style="
+              --grid-item-column-start: 1;
+              --grid-item-row-start: 2;
+              display: flex;
+              flex-direction: column;
+              justify-self: start;
+            "
+          >
 
             <label for="placement_left_top" class="Radio">
               <input type="radio" name="placement" value="leftTop" id="placement_left_top" class="Radio__input" />
@@ -74,7 +83,16 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
+          <div
+            class="GridItem"
+            style="
+              --grid-item-column-start: 3;
+              --grid-item-row-start: 2;
+              display: flex;
+              flex-direction: column;
+              justify-self: end;
+            "
+          >
 
             <label for="placement_right_top" class="Radio">
               <input type="radio" name="placement" value="rightTop" id="placement_right_top" class="Radio__input" />
@@ -96,7 +114,7 @@ <h2 class="docs-Heading">Placements</h2>
             </label>
 
           </div>
-          <div style="grid-row: 2; grid-column: 2">
+          <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">
 
             <div class="TooltipWrapper" style="margin: 5rem auto">
               <div class="docs-Box px-900 py-900">