streamlit · sfc-gh-tteixeira · Jan 3, 2026 · Dec 12, 2025 · Dec 12, 2025 · Dec 13, 2025
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png
diff --git a/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png b/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png
diff --git a/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png b/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png
diff --git a/...ght/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png b/...ght/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png
diff --git a/...ight/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png b/...ight/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png
diff --git a/...ght/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png b/...ght/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png
diff --git a/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[chromium].png b/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[chromium].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[firefox].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[firefox].png
diff --git a/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[webkit].png b/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[webkit].png
diff --git a/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[chromium].png b/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[chromium].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[firefox].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[firefox].png
diff --git a/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[webkit].png b/...ht/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[webkit].png
diff --git a/...__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[chromium].png b/...__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[chromium].png
diff --git a/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[firefox].png b/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[firefox].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[webkit].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[webkit].png
diff --git a/...__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[chromium].png b/...__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[chromium].png
diff --git a/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[firefox].png b/.../__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[firefox].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[webkit].png b/...t/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[webkit].png
diff --git a/...t/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png b/...t/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png
diff --git a/...ht/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png b/...ht/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png
diff --git a/...ght/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png b/...ght/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png
diff --git a/...hots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png b/...hots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png
diff --git a/...shots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png b/...shots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png
diff --git a/...pshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png b/...pshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png
diff --git a/...hots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png b/...hots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png
diff --git a/...shots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png b/...shots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png
diff --git a/...pshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png b/...pshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png
diff --git a/...apshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png b/...apshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png
diff --git a/...napshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png b/...napshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png
diff --git a/...snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png b/...snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png
diff --git a/...hots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png b/...hots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png
diff --git a/...shots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png b/...shots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png
diff --git a/...pshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png b/...pshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png
diff --git a/...ts__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png b/...ts__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png
diff --git a/...ots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png b/...ots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png
diff --git a/...hots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png b/...hots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png
diff --git a/...est/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png b/...est/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png
diff --git a/..._test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png b/..._test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png
diff --git a/...e_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png b/...e_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png
diff --git a/..._test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png b/..._test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png
diff --git a/...est/st_layouts_container_gap_size-container-horizontal-gap-xlarge[chromium].png b/...est/st_layouts_container_gap_size-container-horizontal-gap-xlarge[chromium].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[firefox].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[firefox].png
diff --git a/..._test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[webkit].png b/..._test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[webkit].png
diff --git a/...est/st_layouts_container_gap_size-container-horizontal-gap-xsmall[chromium].png b/...est/st_layouts_container_gap_size-container-horizontal-gap-xsmall[chromium].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[firefox].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[firefox].png
diff --git a/..._test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[webkit].png b/..._test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[webkit].png
diff --git a/...st/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[chromium].png b/...st/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[chromium].png
diff --git a/...est/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[firefox].png b/...est/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[firefox].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[webkit].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[webkit].png
diff --git a/...st/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[chromium].png b/...st/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[chromium].png
diff --git a/...est/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[firefox].png b/...est/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[firefox].png
diff --git a/...test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[webkit].png b/...test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[webkit].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png
diff --git a/...ze_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png b/...ze_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png
diff --git a/..._test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png b/..._test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png
diff --git a/...ze_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png b/...ze_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png
diff --git a/..._test/st_layouts_container_gap_size-container-vertical-gap-xlarge[chromium].png b/..._test/st_layouts_container_gap_size-container-vertical-gap-xlarge[chromium].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[firefox].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[firefox].png
diff --git a/...ze_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[webkit].png b/...ze_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[webkit].png
diff --git a/..._test/st_layouts_container_gap_size-container-vertical-gap-xsmall[chromium].png b/..._test/st_layouts_container_gap_size-container-vertical-gap-xsmall[chromium].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[firefox].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[firefox].png
diff --git a/...ze_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[webkit].png b/...ze_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[webkit].png
diff --git a/...test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[chromium].png b/...test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[chromium].png
diff --git a/..._test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[firefox].png b/..._test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[firefox].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[webkit].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[webkit].png
diff --git a/...test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[chromium].png b/...test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[chromium].png
diff --git a/..._test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[firefox].png b/..._test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[firefox].png
diff --git a/...e_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[webkit].png b/...e_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[webkit].png
diff --git a/...t/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png b/...t/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png
diff --git a/...ht/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png b/...ht/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png
diff --git a/...ight/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png b/...ight/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png
diff --git a/...right/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png b/...right/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png
diff --git a/...apshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png b/...apshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png
diff --git a/...napshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png b/...napshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png
diff --git a/e2e_playwright/st_columns.py b/e2e_playwright/st_columns.py
@@ -14,11 +14,16 @@
 
 from __future__ import annotations
 
+from typing import TYPE_CHECKING, cast
+
 import numpy as np
 import numpy.typing as npt
 
 import streamlit as st
 
+if TYPE_CHECKING:
+    from streamlit.elements.lib.layout_utils import Gap
+
 LOREM_IPSUM = (
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor "
     "incididunt ut labore et dolore magna aliqua."
@@ -53,29 +58,28 @@
         c.image(BLACK_IMG)
 
 # Various column gaps
-with st.expander("Column gap small", expanded=True):
-    c4, c5, c6 = st.columns(3, gap="small")
-    c4.image(BLACK_IMG)
-    c5.image(BLACK_IMG)
-    c6.image(BLACK_IMG)
-
-with st.expander("Column gap medium", expanded=True):
-    c7, c8, c9 = st.columns(3, gap="medium")
-    c7.image(BLACK_IMG)
-    c8.image(BLACK_IMG)
-    c9.image(BLACK_IMG)
-
-with st.expander("Column gap large", expanded=True):
-    c10, c11, c12 = st.columns(3, gap="large")
-    c10.image(BLACK_IMG)
-    c11.image(BLACK_IMG)
-    c12.image(BLACK_IMG)
-
-with st.expander("Column gap none", expanded=True):
-    c13, c14, c15 = st.columns(3, gap=None)
-    c13.image(BLACK_IMG)
-    c14.image(BLACK_IMG)
-    c15.image(BLACK_IMG)
+
+GAPS = cast(
+    "list[Gap|None]",
+    [
+        None,
+        "xxsmall",
+        "xsmall",
+        "small",
+        "medium",
+        "large",
+        "xlarge",
+        "xxlarge",
+    ],
+)
+
+for gap in GAPS:
+    gap_name = str(gap).lower()
+
+    with st.expander(f"Column gap {gap_name}", expanded=True):
+        cols = st.columns(3, gap=gap)
+        for col in cols:
+            col.image(BLACK_IMG)
 
 with st.expander("Nested columns - one level", expanded=True):
     col1, col2 = st.columns(2)

diff --git a/e2e_playwright/st_columns_test.py b/e2e_playwright/st_columns_test.py
@@ -65,58 +65,34 @@ def test_columns_with_border(app: Page, assert_snapshot: ImageCompareFunction):
     assert_snapshot(column_container, name="st_columns-with_border")
 
 
-def test_column_gap_small_is_correctly_applied(
+def test_column_gap_is_correctly_applied(
     app: Page, assert_snapshot: ImageCompareFunction
 ):
-    """Test that the small column gap is correctly applied."""
-    column_gap_small = (
-        get_expander(app, "Column gap small").get_by_test_id("stHorizontalBlock").nth(0)
-    )
-    # We use regex here since some browsers may resolve this to two numbers:
-    expect(column_gap_small).to_have_css("gap", re.compile("16px"))
-    column_gap_small.scroll_into_view_if_needed()
-    assert_snapshot(column_gap_small, name="st_columns-column_gap_small")
-
-
-def test_column_gap_medium_is_correctly_applied(
-    app: Page, assert_snapshot: ImageCompareFunction
-):
-    """Test that the medium column gap is correctly applied."""
-    column_gap_medium = (
-        get_expander(app, "Column gap medium")
-        .get_by_test_id("stHorizontalBlock")
-        .nth(0)
-    )
-    # We use regex here since some browsers may resolve this to two numbers:
-    expect(column_gap_medium).to_have_css("gap", re.compile("32px"))
-    column_gap_medium.scroll_into_view_if_needed()
-    assert_snapshot(column_gap_medium, name="st_columns-column_gap_medium")
-
-
-def test_column_gap_large_is_correctly_applied(
-    app: Page, assert_snapshot: ImageCompareFunction
-):
-    """Test that the large column gap is correctly applied."""
-    column_gap_large = (
-        get_expander(app, "Column gap large").get_by_test_id("stHorizontalBlock").nth(0)
-    )
-    # We use regex here since some browsers may resolve this to two numbers:
-    expect(column_gap_large).to_have_css("gap", re.compile("64px"))
-    column_gap_large.scroll_into_view_if_needed()
-    assert_snapshot(column_gap_large, name="st_columns-column_gap_large")
-
-
-def test_column_gap_none_is_correctly_applied(
-    app: Page, assert_snapshot: ImageCompareFunction
-):
-    """Test that the none column gap is correctly applied."""
-    column_gap_none = (
-        get_expander(app, "Column gap none").get_by_test_id("stHorizontalBlock").nth(0)
-    )
-    # We use regex here since some browsers may resolve this to two numbers:
-    expect(column_gap_none).to_have_css("gap", re.compile("0px"))
-    column_gap_none.scroll_into_view_if_needed()
-    assert_snapshot(column_gap_none, name="st_columns-column_gap_none")
+    """Test that the different-sized column gaps are correctly applied."""
+
+    gaps = [
+        (None, "0"),
+        ("xxsmall", "4px"),
+        ("xsmall", "8px"),
+        ("small", "16px"),
+        ("medium", "32px"),
+        ("large", "64px"),
+        ("xlarge", "96px"),
+        ("xxlarge", "128px"),
+    ]
+
+    for gap, gap_value in gaps:
+        gap_name = str(gap).lower()
+
+        column_gap = (
+            get_expander(app, f"Column gap {gap_name}")
+            .get_by_test_id("stHorizontalBlock")
+            .nth(0)
+        )
+        # We use regex here since some browsers may resolve this to two numbers:
+        expect(column_gap).to_have_css("gap", re.compile(gap_value))
+        column_gap.scroll_into_view_if_needed()
+        assert_snapshot(column_gap, name=f"st_columns-column_gap_{gap_name}")
 
 
 def test_one_level_nesting_works_correctly(

diff --git a/e2e_playwright/st_layouts_container_gap_size.py b/e2e_playwright/st_layouts_container_gap_size.py
@@ -12,160 +12,73 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import streamlit as st
+from __future__ import annotations
 
-with st.container(
-    border=True,
-    gap="small",
-    horizontal=True,
-    key="container-horizontal-gap-small",
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Four</div>',
-        width="stretch",
-    )
+from typing import TYPE_CHECKING, cast
 
-with st.container(
-    border=True,
-    gap="medium",
-    horizontal=True,
-    key="container-horizontal-gap-medium",
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Four</div>',
-        width="stretch",
-    )
+import streamlit as st
 
-with st.container(
-    border=True,
-    gap="large",
-    horizontal=True,
-    key="container-horizontal-gap-large",
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Four</div>',
-        width="stretch",
-    )
+if TYPE_CHECKING:
+    from streamlit.elements.lib.layout_utils import Gap
 
-with st.container(
-    border=True,
-    gap=None,
-    horizontal=True,
-    key="container-horizontal-gap-none",
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Four</div>',
-        width="stretch",
-    )
+GAPS = cast(
+    "list[Gap | None]",
+    [
+        None,
+        "xxsmall",
+        "xsmall",
+        "small",
+        "medium",
+        "large",
+        "xlarge",
+        "xxlarge",
+    ],
+)
 
-with st.container(
-    border=True, gap="small", horizontal=False, key="container-vertical-gap-small"
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
+for gap in GAPS:
+    gap_name = str(gap).lower()
 
-with st.container(
-    border=True, gap="medium", horizontal=False, key="container-vertical-gap-medium"
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
+    with st.container(
+        border=True,
+        gap=gap,
+        horizontal=True,
+        key=f"container-horizontal-gap-{gap_name}",
+    ):
+        st.html(
+            '<div style="background:lightblue">One</div>',
+            width="stretch",
+        )
+        st.html(
+            '<div style="background:lightblue">Two</div>',
+            width="stretch",
+        )
+        st.html(
+            '<div style="background:lightblue">Three</div>',
+            width="stretch",
+        )
+        st.html(
+            '<div style="background:lightblue">Four</div>',
+            width="stretch",
+        )
 
-with st.container(
-    border=True, gap="large", horizontal=False, key="container-vertical-gap-large"
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
+for gap in GAPS:
+    gap_name = str(gap).lower()
 
-with st.container(
-    border=True, gap=None, horizontal=False, key="container-vertical-gap-none"
-):
-    st.html(
-        '<div style="background:lightblue">One</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Two</div>',
-        width="stretch",
-    )
-    st.html(
-        '<div style="background:lightblue">Three</div>',
-        width="stretch",
-    )
+    with st.container(
+        border=True,
+        gap=gap,
+        horizontal=False,
+        key=f"container-vertical-gap-{gap_name}",
+    ):
+        st.html(
+            '<div style="background:lightblue">One</div>',
+            width="stretch",
+        )
+        st.html(
+            '<div style="background:lightblue">Two</div>',
+            width="stretch",
+        )
+        st.html(
+            '<div style="background:lightblue">Three</div>',
+            width="stretch",
+        )