diff --git a/apps/web-twig-demo/public/css/demo.css b/apps/web-twig-demo/public/css/demo.css
index 3fb97696b2..f0b2b6235b 100644
--- a/apps/web-twig-demo/public/css/demo.css
+++ b/apps/web-twig-demo/public/css/demo.css
@@ -35,11 +35,14 @@
 .docs-Stack {
   display: grid;
   row-gap: 1rem;
+}
+
+.docs-Stack--start {
   justify-items: start;
 }
 
-.docs-Stack--fluid {
-  justify-items: initial;
+.docs-Stack--stretch {
+  justify-items: stretch;
 }
 
 .docs-Box {
diff --git a/packages/web-twig/docs/components/DocsSection/DocsSection.twig b/packages/web-twig/docs/components/DocsSection/DocsSection.twig
index 4adae807c8..c3418b4219 100644
--- a/packages/web-twig/docs/components/DocsSection/DocsSection.twig
+++ b/packages/web-twig/docs/components/DocsSection/DocsSection.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _hasFluidLayout = props.hasFluidLayout | default(false) -%}
+{%- set _hasStack = props.hasStack ?? true -%}
+{%- set _stackAlignment = props.stackAlignment | default('start') -%}
 {%- set _tag = props.tag | default(null) -%}
 {%- set _title = props.title -%}
 
@@ -8,12 +9,16 @@
 {%- set _rootClassName = 'docs-Section' -%}
 {%- set _headingClassName = 'docs-Heading' -%}
 {%- set _stackClassName = 'docs-Stack' -%}
-{%- set _stackFluidClassName = _hasFluidLayout ? 'docs-Stack--fluid' : null -%}
+{%- set _stackAlignmentClassName = 'docs-Stack--' ~ _stackAlignment -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _rootClassNames = [_rootClassName, _styleProps.className] -%}
-{%- set _stackClassNames = [_stackClassName, _stackFluidClassName] -%}
+{%- set _stackClassNames = [_stackClassName, _stackAlignmentClassName] -%}
+
+{%- set _renderedContent %}
+    {% block content %}{% endblock %}
+{% endset -%}
 
 <section
     {{ mainProps(props) }}
@@ -26,7 +31,11 @@
             <Tag color="warning" isSubtle>{{ _tag }}</Tag>
         {% endif %}
     </h2>
-    <div {{ classProp(_stackClassNames) }}>
-        {% block content %}{% endblock %}
-    </div>
+    {% if _hasStack %}
+        <div {{ classProp(_stackClassNames) }}>
+            {{ _renderedContent }}
+        </div>
+    {% else %}
+        {{ _renderedContent }}
+    {% endif %}
 </section>
diff --git a/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig b/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig
index d17c23881d..d6ce54c4fe 100644
--- a/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig
+++ b/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig
@@ -1,4 +1,19 @@
 <DocsSection title="My Title" />
 
+<!-- Render with stack alignment -->
+<DocsSection
+    stackAlignment="stretch"
+    title="My Title"
+>
+    my content
+</DocsSection>
+
 <!-- Render with all props -->
-<DocsSection tag="My tag" title="My Title">my content</DocsSection>
+<DocsSection
+    hasStack={false}
+    stackAlignment="stretch"
+    tag="My tag"
+    title="My Title"
+>
+    my content
+</DocsSection>
diff --git a/packages/web-twig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html b/packages/web-twig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html
index 51b72918dd..c6053145f8 100644
--- a/packages/web-twig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html
+++ b/packages/web-twig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html
@@ -10,19 +10,27 @@ <h2 class="docs-Heading">
         My Title
       </h2>
 
-      <div class="docs-Stack">
+      <div class="docs-Stack docs-Stack--start">
       </div>
     </section>
-    <!-- Render with all props -->
+    <!-- Render with stack alignment -->
 
     <section class="docs-Section">
       <h2 class="docs-Heading">
-        My Title <span class="Tag Tag--warning Tag--medium Tag--subtle">My tag</span>
+        My Title
       </h2>
 
-      <div class="docs-Stack">
+      <div class="docs-Stack docs-Stack--stretch">
         my content
       </div>
     </section>
+    <!-- Render with all props -->
+
+    <section class="docs-Section">
+      <h2 class="docs-Heading">
+        My Title <span class="Tag Tag--warning Tag--medium Tag--subtle">My tag</span>
+      </h2>
+      my content
+    </section>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
index d79d239d7b..78f1d2f208 100644
--- a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
+++ b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
@@ -2,15 +2,15 @@
 
 {% block content %}
 
-    <DocsSection title="Alert Colors">
+    <DocsSection title="Alert Colors" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertColors.twig' %}
     </DocsSection>
 
-    <DocsSection title="Alert Centered">
+    <DocsSection title="Alert Centered" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertCentered.twig' %}
     </DocsSection>
 
-    <DocsSection title="Alert Icons">
+    <DocsSection title="Alert Icons" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertIcons.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Button/Button.stories.twig b/packages/web-twig/src/Resources/components/Button/Button.stories.twig
index 4343cd5f61..1eaa9de33c 100644
--- a/packages/web-twig/src/Resources/components/Button/Button.stories.twig
+++ b/packages/web-twig/src/Resources/components/Button/Button.stories.twig
@@ -7,15 +7,15 @@
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
-    <DocsSection title="Default">
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonColorsSizes.twig' %}
     </DocsSection>
 
-    <DocsSection title="Disabled">
+    <DocsSection title="Disabled" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonDisabled.twig' %}
     </DocsSection>
 
-    <DocsSection title="Loading">
+    <DocsSection title="Loading" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonLoading.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
index 0bc526e5b5..da8ff050a0 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
@@ -7,11 +7,11 @@
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
-    <DocsSection title="Default">
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/ButtonLink/stories/ButtonLinkColorsSizes.twig' %}
     </DocsSection>
 
-    <DocsSection title="Disabled">
+    <DocsSection title="Disabled" stackAlignment="stretch">
         {% include '@components/ButtonLink/stories/ButtonLinkDisabled.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
index c7650e495f..96f18ba3e3 100644
--- a/packages/web-twig/src/Resources/components/Container/Container.stories.twig
+++ b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
@@ -1,5 +1,14 @@
 {% extends 'layout/plain.html.twig' %}
 
 {% block content %}
-    {% include '@components/Container/stories/ContainerDefault.twig' %}
+
+    <DocsSection title="Default" stackAlignment="stretch">
+
+        {# Use `.breakout-container` to make the example Container overlap with the Container in the page layout. #}
+        <div class="breakout-container">
+            {% include '@components/Container/stories/ContainerDefault.twig' %}
+        </div>
+
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
index 0aca1d5acb..5867c4f595 100644
--- a/packages/web-twig/src/Resources/components/Header/Header.stories.twig
+++ b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
@@ -2,27 +2,27 @@
 
 {% block content %}
 
-    <DocsSection title="Minimal Inverted Header" hasFluidLayout>
+    <DocsSection title="Minimal Inverted Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderMinimalInverted.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions" hasFluidLayout>
+    <DocsSection title="Inverted Header with Actions" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderInvertedWithActions.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions and Header Dialog" hasFluidLayout>
+    <DocsSection title="Inverted Header with Actions and Header Dialog" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderInvertedWithActionsAndDialog.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Inverted Header" hasFluidLayout>
+    <DocsSection title="Simple Inverted Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderSimpleInverted.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Transparent Header" hasFluidLayout>
+    <DocsSection title="Simple Transparent Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderSimpleTransparent.twig' %}
     </DocsSection>
 
-    <DocsSection title="Experimental RTL Support" hasFluidLayout>
+    <DocsSection title="Experimental RTL Support" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderExperimentalRTL.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig b/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig
index 34f1ab33f0..a0fc65f40a 100644
--- a/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig
+++ b/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig
@@ -14,7 +14,7 @@
         {% include '@components/Pagination/stories/PaginationCurrentLast.twig' %}
     </DocsSection>
 
-    <DocsSection title="Pagination Current First Centered" hasFluidLayout>
+    <DocsSection title="Pagination Current First Centered" stackAlignment="stretch">
         {% include '@components/Pagination/stories/PaginationCurrentFirstCentered.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig
index 31f99d946c..e1c8aac1b6 100644
--- a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig
+++ b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig
@@ -10,13 +10,8 @@
         {% include '@components/ScrollView/stories/ScrollViewHorizontal.twig' %}
     </DocsSection>
 
-    <DocsSection title="Horizontal Scrolling with Container Breakout">
-        {# Use Grid to prepare the ground for container breakout (inside of the included example). #}
-        <Grid>
-            <GridSpan over={12}>
-                {% include '@components/ScrollView/stories/ScrollViewHorizontalBreakout.twig' %}
-            </GridSpan>
-        </Grid>
+    <DocsSection title="Horizontal Scrolling with Container Breakout" hasStack={ false }>
+        {% include '@components/ScrollView/stories/ScrollViewHorizontalBreakout.twig' %}
     </DocsSection>
 
     <DocsSection title="Overflow Decorators">
diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig
index 331406fe7f..7723173db4 100644
--- a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig
+++ b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig
@@ -2,27 +2,27 @@
 
 {% block content %}
 
-    <DocsSection title="Stacked Form Fields" hasFluidLayout>
+    <DocsSection title="Stacked Form Fields" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackFormFields.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks" hasFluidLayout>
+    <DocsSection title="Stacked Blocks" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocks.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner Dividers and Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner Dividers and Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerDividersAndVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner and Outer Dividers and Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner and Outer Dividers and Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner Dividers without Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner Dividers without Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerDividersWithoutVerticalSpacing.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig
index 848603e418..c375654556 100644
--- a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <DocsSection title="Default" hasFluidLayout>
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/Tabs/stories/TabsDefault.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig
index cf4efd3df8..e74ef67188 100644
--- a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig
@@ -2,6 +2,8 @@
 
 {% block content %}
 
-    {% include '@components/Tag/stories/TagDefault.twig' %}
+    <DocsSection title="Default" stackAlignment="stretch">
+        {% include '@components/Tag/stories/TagDefault.twig' %}
+    </DocsSection>
 
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig b/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig
index 0bf85afcdc..560f0e664d 100644
--- a/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig
+++ b/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig
@@ -34,7 +34,7 @@
         {% include '@components/TextField/stories/TextFieldInputWidth.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inline" hasFluidLayout>
+    <DocsSection title="Inline" stackAlignment="stretch">
         {% include '@components/TextField/stories/TextFieldInline.twig' %}
     </DocsSection>
 
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
index 3a61836a9e..b53a8613e9 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <DocsSection title="Static Tooltip (No Interaction)" hasFluidLayout>
+    <DocsSection title="Static Tooltip (No Interaction)" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipDefault.twig' %}
     </DocsSection>