flexbox_and_grid

Flexbox and CSS Grid utilities for Tailwind CSS

Display Utilities for Flexbox and Grid

Essential display utilities for creating flex and grid containers.

---

GridDisplayFactory

def GridDisplayFactory(
    
):

Factory for grid display utilities.

---

FlexDisplayFactory

def FlexDisplayFactory(
    
):

Factory for flex display utilities.

---

test_flexbox_and_grid_display_examples

def test_flexbox_and_grid_display_examples(
    
):

Test flex and grid display utilities.

# Create the display factories
flex_display = FlexDisplayFactory() # The flex display factory
grid_display = GridDisplayFactory() # The grid display factory

def test_flexbox_and_grid_display_examples(
):
    """Test flex and grid display utilities."""
    # Test flex display utilities
    assert str(flex_display) == "flex"
    assert flex_display.inline == "inline-flex"
    
    # Test grid display utilities
    assert str(grid_display) == "grid"
    assert grid_display.inline == "inline-grid"
    
    # Test with modifiers
    assert str(flex_display.hover) == "hover:flex"
    assert str(flex_display.md) == "md:flex"
    assert str(grid_display.lg) == "lg:grid"

# Run the tests
test_flexbox_and_grid_display_examples()

Flex Basis Utilities

Control the initial size of flex items before they grow or shrink.

---

test_flexbox_and_grid_basis_examples

def test_flexbox_and_grid_basis_examples(
    
):

Test flex basis utilities with various scale values.

FLEX_BASIS_CONFIG = ScaleConfig( # Create configuration for flex basis - similar to width/height but with container scales
    numeric=True,
    decimals=True,
    fractions=True,
    named=CONTAINER_SCALES,  # Use container scales (3xs through 7xl)
    special={
        "auto": "auto",
        "full": "full"
    },
    negative=False
)

# Create flex basis factory
basis = ScaledFactory("basis", FLEX_BASIS_CONFIG, "Flex basis utilities for controlling the initial size of flex items") # The flex basis factory

def test_flexbox_and_grid_basis_examples(
):
    """Test flex basis utilities with various scale values."""
    # Test flex basis utilities
    assert str(basis(0)) == "basis-0"
    assert str(basis(4)) == "basis-4"
    assert str(basis(64)) == "basis-64"
    assert str(basis("1/2")) == "basis-1/2"
    assert str(basis("2/3")) == "basis-2/3"
    assert str(basis.auto) == "basis-auto"
    assert str(basis.full) == "basis-full"
    
    # Named container sizes
    assert str(basis.xs) == "basis-xs"
    assert str(basis.sm) == "basis-sm"
    assert str(basis.md) == "basis-md"
    assert str(basis.lg) == "basis-lg"
    assert str(basis._2xl) == "basis-2xl"
    
    # Arbitrary values
    assert str(basis("200px")) == "basis-[200px]"
    assert str(basis("--custom-basis")) == "basis-(--custom-basis)"

# Run the tests
test_flexbox_and_grid_basis_examples()

Flex Direction Utilities

Control the direction of flex items in a flex container.

---

test_flexbox_and_grid_direction_examples

def test_flexbox_and_grid_direction_examples(
    
):

Test flex direction utilities.

FLEX_DIRECTION_VALUES = { # Flex direction utilities
    "row": "flex-row",
    "row-reverse": "flex-row-reverse",
    "col": "flex-col",
    "col-reverse": "flex-col-reverse"
}

# Create flex direction factory
flex_direction = SimpleFactory(FLEX_DIRECTION_VALUES, "Flex direction utilities for controlling the direction of flex items") # The flex direction factory

def test_flexbox_and_grid_direction_examples(
):
    """Test flex direction utilities."""
    # Test flex direction utilities
    assert str(flex_direction.row) == "flex-row"
    assert str(flex_direction.row_reverse) == "flex-row-reverse"
    assert str(flex_direction.col) == "flex-col"
    assert str(flex_direction.col_reverse) == "flex-col-reverse"

# Run the tests
test_flexbox_and_grid_direction_examples()

Flex Wrap Utilities

Control how flex items wrap.

---

test_flexbox_and_grid_wrap_examples

def test_flexbox_and_grid_wrap_examples(
    
):

Test flex wrap utilities.

FLEX_WRAP_VALUES = { # Flex wrap utilities
    "nowrap": "flex-nowrap",
    "wrap": "flex-wrap",
    "wrap-reverse": "flex-wrap-reverse"
}

# Create flex wrap factory
flex_wrap = SimpleFactory(FLEX_WRAP_VALUES, "Flex wrap utilities for controlling how flex items wrap") # The flex wrap factory

def test_flexbox_and_grid_wrap_examples(
):
    """Test flex wrap utilities."""
    # Test flex wrap utilities
    assert str(flex_wrap.nowrap) == "flex-nowrap"
    assert str(flex_wrap.wrap) == "flex-wrap"
    assert str(flex_wrap.wrap_reverse) == "flex-wrap-reverse"

# Run the tests
test_flexbox_and_grid_wrap_examples()

Flex Utilities

Control how flex items both grow and shrink.

---

test_flexbox_and_grid_flex_examples

def test_flexbox_and_grid_flex_examples(
    
):

Test flex utilities for combined grow/shrink properties.

FLEX_CONFIG = ScaleConfig( # Flex configuration - supports numeric values and special presets
    numeric=True,  # Support flex-1, flex-2, etc.
    decimals=False,
    fractions=True,  # Support flex-1/2, etc.
    named=None,
    special={
        "auto": "auto",      # flex: 1 1 auto
        "initial": "initial", # flex: 0 1 auto
        "none": "none"       # flex: none
    },
    negative=False
)

# Create flex factory
flex = ScaledFactory("flex", FLEX_CONFIG, "Flex utilities for controlling how flex items both grow and shrink") # The flex factory

def test_flexbox_and_grid_flex_examples(
):
    """Test flex utilities for combined grow/shrink properties."""
    # Test flex utilities
    assert str(flex(1)) == "flex-1"
    assert str(flex(2)) == "flex-2"
    assert str(flex("1/2")) == "flex-1/2"
    assert str(flex.auto) == "flex-auto"
    assert str(flex.initial) == "flex-initial"
    assert str(flex.none) == "flex-none"
    
    # Arbitrary values
    assert str(flex("2 2 0%")) == "flex-[2 2 0%]"

# Run the tests
test_flexbox_and_grid_flex_examples()

Flex Grow Utilities

Control how flex items grow.

---

GrowFactory

def GrowFactory(
    
):

Special factory for grow that defaults to grow-1 when called without args.

---

test_flexbox_and_grid_grow_examples

def test_flexbox_and_grid_grow_examples(
    
):

Test flex grow utilities.

# Create flex grow factory
grow = GrowFactory() # The flex grow factory

def test_flexbox_and_grid_grow_examples(
):
    """Test flex grow utilities."""
    # Test flex grow utilities
    assert str(grow()) == "grow-1" # which becomes grow-1
    assert str(grow(0)) == "grow-0"
    assert str(grow(1)) == "grow-1"
    assert str(grow(2)) == "grow-2"
    
    # Arbitrary values
    assert str(grow("3")) == "grow-3"

# Run the tests
test_flexbox_and_grid_grow_examples()

Flex Shrink Utilities

Control how flex items shrink.

---

ShrinkFactory

def ShrinkFactory(
    
):

Special factory for shrink that defaults to shrink-1 when called without args.

---

test_flexbox_and_grid_shrink_examples

def test_flexbox_and_grid_shrink_examples(
    
):

Test flex shrink utilities.

# Create flex shrink factory
shrink = ShrinkFactory() # The flex shrink factory

def test_flexbox_and_grid_shrink_examples(
):
    """Test flex shrink utilities."""
    # Test flex shrink utilities
    assert str(shrink()) == "shrink-1" # which becomes shrink-1
    assert str(shrink(0)) == "shrink-0"
    assert str(shrink(1)) == "shrink-1"
    assert str(shrink(2)) == "shrink-2"
    
    # Arbitrary values
    assert str(shrink("3")) == "shrink-3"

# Run the tests
test_flexbox_and_grid_shrink_examples()

Order Utilities

Control the order of flex and grid items.

---

test_flexbox_and_grid_order_examples

def test_flexbox_and_grid_order_examples(
    
):

Test order utilities for flex and grid items.

ORDER_CONFIG = ScaleConfig( # Order configuration - supports numeric values including negative
    numeric=True,  # Support order-1, order-2, etc.
    decimals=False,
    fractions=False,
    named=None,
    special={
        "first": "first",  # order: calc(-infinity)
        "last": "last",    # order: calc(infinity)
        "none": "none"     # order: 0
    },
    negative=True  # Support negative order values
)

# Create order factory
order = ScaledFactory("order", ORDER_CONFIG, "Order utilities for controlling the order of flex and grid items") # The order factory

def test_flexbox_and_grid_order_examples(
):
    """Test order utilities for flex and grid items."""
    # Test order utilities
    assert str(order(1)) == "order-1"
    assert str(order(2)) == "order-2"
    assert str(order(12)) == "order-12"
    assert str(order.first) == "order-first"
    assert str(order.last) == "order-last"
    assert str(order.none) == "order-none"
    
    # Negative values
    assert str(order.negative(1)) == "-order-1"
    assert str(order.negative(2)) == "-order-2"
    
    # Arbitrary values
    assert str(order("999")) == "order-[999]"

# Run the tests
test_flexbox_and_grid_order_examples()

Grid Template Columns Utilities

Specify the columns in a grid layout.

---

test_flexbox_and_grid_template_columns_examples

def test_flexbox_and_grid_template_columns_examples(
    
):

Test grid template columns utilities.

GRID_COLS_CONFIG = ScaleConfig( # Grid template columns configuration
    numeric=True,  # Support grid-cols-1 through grid-cols-12
    decimals=False,
    fractions=False,
    named=None,
    special={
        "none": "none",        # grid-template-columns: none
        "subgrid": "subgrid"   # grid-template-columns: subgrid
    },
    negative=False
)

# Create grid columns factory
grid_cols = ScaledFactory("grid-cols", GRID_COLS_CONFIG, "Grid template columns utilities for specifying the columns in a grid layout") # The grid columns factory

def test_flexbox_and_grid_template_columns_examples(
):
    """Test grid template columns utilities."""
    # Test grid template columns
    assert str(grid_cols(1)) == "grid-cols-1"
    assert str(grid_cols(2)) == "grid-cols-2"
    assert str(grid_cols(3)) == "grid-cols-3"
    assert str(grid_cols(12)) == "grid-cols-12"
    assert str(grid_cols.none) == "grid-cols-none"
    assert str(grid_cols.subgrid) == "grid-cols-subgrid"
    
    # Arbitrary values
    assert str(grid_cols("200px 1fr 2fr")) == "grid-cols-[200px 1fr 2fr]"

# Run the tests
test_flexbox_and_grid_template_columns_examples()

Grid Template Rows Utilities

Specify the rows in a grid layout.

---

test_flexbox_and_grid_template_rows_examples

def test_flexbox_and_grid_template_rows_examples(
    
):

Test grid template rows utilities.

GRID_ROWS_CONFIG = ScaleConfig( # Grid template rows configuration (same as columns)
    numeric=True,  # Support grid-rows-1 through grid-rows-12
    decimals=False,
    fractions=False,
    named=None,
    special={
        "none": "none",        # grid-template-rows: none
        "subgrid": "subgrid"   # grid-template-rows: subgrid
    },
    negative=False
)

# Create grid rows factory
grid_rows = ScaledFactory("grid-rows", GRID_ROWS_CONFIG, "Grid template rows utilities for specifying the rows in a grid layout") # The grid rows factory

def test_flexbox_and_grid_template_rows_examples(
):
    """Test grid template rows utilities."""
    # Test grid template rows
    assert str(grid_rows(1)) == "grid-rows-1"
    assert str(grid_rows(2)) == "grid-rows-2"
    assert str(grid_rows(3)) == "grid-rows-3"
    assert str(grid_rows(6)) == "grid-rows-6"
    assert str(grid_rows.none) == "grid-rows-none"
    assert str(grid_rows.subgrid) == "grid-rows-subgrid"
    
    # Arbitrary values
    assert str(grid_rows("200px auto 1fr")) == "grid-rows-[200px auto 1fr]"

# Run the tests
test_flexbox_and_grid_template_rows_examples()

Grid Column Utilities

Control how elements are sized and placed across grid columns.

---

ColFactory

def ColFactory(
    
):

Special factory for grid-column shorthand.

COL_SPAN_CONFIG = ScaleConfig( # Grid column span configuration
    numeric=True,  # Support col-span-1 through col-span-12
    decimals=False,
    fractions=False,
    named=None,
    special={
        "auto": "auto",  # grid-column: auto
        "full": "full"   # grid-column: 1 / -1
    },
    negative=False
)

COL_START_END_CONFIG = ScaleConfig( # Grid column start/end configuration
    numeric=True,  # Support col-start-1, col-end-13, etc.
    decimals=False,
    fractions=False,
    named=None,
    special={
        "auto": "auto"
    },
    negative=True  # Support negative values like -col-start-1
)

# Create grid column factories
col_span = ScaledFactory("col-span", COL_SPAN_CONFIG, "Column span utilities for controlling how many columns an element spans") # Column span factory
col_start = ScaledFactory("col-start", COL_START_END_CONFIG, "Column start utilities for controlling where an element starts") # Column start factory
col_end = ScaledFactory("col-end", COL_START_END_CONFIG, "Column end utilities for controlling where an element ends") # Column end factory

---

test_flexbox_and_grid_column_examples

def test_flexbox_and_grid_column_examples(
    
):

Test grid column utilities including span, start, and end.

col = ColFactory() # The grid column factory

def test_flexbox_and_grid_column_examples(
):
    """Test grid column utilities including span, start, and end."""
    # Test grid column utilities
    assert str(col_span(1)) == "col-span-1"
    assert str(col_span(2)) == "col-span-2"
    assert str(col_span(12)) == "col-span-12"
    assert str(col_span.auto) == "col-span-auto"
    assert str(col_span.full) == "col-span-full"
    
    # Column start/end
    assert str(col_start(1)) == "col-start-1"
    assert str(col_start(2)) == "col-start-2"
    assert str(col_start.auto) == "col-start-auto"
    assert str(col_end(13)) == "col-end-13"
    assert str(col_end.auto) == "col-end-auto"
    
    # Negative values
    assert str(col_start.negative(1)) == "-col-start-1"
    assert str(col_end.negative(1)) == "-col-end-1"
    
    # Column shorthand
    assert col.auto == "col-auto"
    assert str(col("1 / 3")) == "col-[1 / 3]"

# Run the tests
test_flexbox_and_grid_column_examples()

Grid Row Utilities

Control how elements are sized and placed across grid rows.

---

RowFactory

def RowFactory(
    
):

Special factory for grid-row shorthand.

ROW_SPAN_CONFIG = ScaleConfig( # Grid row span configuration (same as column)
    numeric=True,  # Support row-span-1 through row-span-12
    decimals=False,
    fractions=False,
    named=None,
    special={
        "auto": "auto",  # grid-row: auto
        "full": "full"   # grid-row: 1 / -1
    },
    negative=False
)

ROW_START_END_CONFIG = ScaleConfig( # Grid row start/end configuration (same as column)
    numeric=True,  # Support row-start-1, row-end-13, etc.
    decimals=False,
    fractions=False,
    named=None,
    special={
        "auto": "auto"
    },
    negative=True  # Support negative values
)

# Create grid row factories
row_span = ScaledFactory("row-span", ROW_SPAN_CONFIG, "Row span utilities for controlling how many rows an element spans") # Row span factory
row_start = ScaledFactory("row-start", ROW_START_END_CONFIG, "Row start utilities for controlling where an element starts") # Row start factory
row_end = ScaledFactory("row-end", ROW_START_END_CONFIG, "Row end utilities for controlling where an element ends") # Row end factory

---

test_flexbox_and_grid_row_examples

def test_flexbox_and_grid_row_examples(
    
):

Test grid row utilities including span, start, and end.

row = RowFactory() # The grid row factory

def test_flexbox_and_grid_row_examples(
):
    """Test grid row utilities including span, start, and end."""
    # Test grid row utilities
    assert str(row_span(1)) == "row-span-1"
    assert str(row_span(2)) == "row-span-2"
    assert str(row_span(6)) == "row-span-6"
    assert str(row_span.auto) == "row-span-auto"
    assert str(row_span.full) == "row-span-full"
    
    # Row start/end
    assert str(row_start(1)) == "row-start-1"
    assert str(row_start(2)) == "row-start-2"
    assert str(row_start.auto) == "row-start-auto"
    assert str(row_end(7)) == "row-end-7"
    assert str(row_end.auto) == "row-end-auto"
    
    # Negative values
    assert str(row_start.negative(1)) == "-row-start-1"
    assert str(row_end.negative(1)) == "-row-end-1"
    
    # Row shorthand
    assert row.auto == "row-auto"
    assert str(row("2 / 5")) == "row-[2 / 5]"

# Run the tests
test_flexbox_and_grid_row_examples()

Grid Auto Flow Utilities

Control how elements in a grid are auto-placed.

---

test_flexbox_and_grid_flow_examples

def test_flexbox_and_grid_flow_examples(
    
):

Test grid auto flow utilities.

GRID_FLOW_VALUES = { # Grid auto flow utilities
    "row": "grid-flow-row",
    "col": "grid-flow-col",
    "dense": "grid-flow-dense",
    "row-dense": "grid-flow-row-dense",
    "col-dense": "grid-flow-col-dense"
}

# Create grid flow factory
grid_flow = SimpleFactory(GRID_FLOW_VALUES, "Grid auto flow utilities for controlling how elements in a grid are auto-placed") # The grid flow factory

def test_flexbox_and_grid_flow_examples(
):
    """Test grid auto flow utilities."""
    # Test grid auto flow utilities
    assert str(grid_flow.row) == "grid-flow-row"
    assert str(grid_flow.col) == "grid-flow-col"
    assert str(grid_flow.dense) == "grid-flow-dense"
    assert str(grid_flow.row_dense) == "grid-flow-row-dense"
    assert str(grid_flow.col_dense) == "grid-flow-col-dense"

# Run the tests
test_flexbox_and_grid_flow_examples()

Grid Auto Columns/Rows Utilities

Control the size of implicitly-created grid columns and rows.

---

AutoColsFactory

def AutoColsFactory(
    
):

Factory for auto-cols with custom value support.

---

AutoRowsFactory

def AutoRowsFactory(
    
):

Factory for auto-rows with custom value support.

---

test_flexbox_and_grid_auto_cols_rows_examples

def test_flexbox_and_grid_auto_cols_rows_examples(
    
):

Test grid auto columns and rows utilities.

# Create the factories
auto_cols = AutoColsFactory() # The auto columns factory
auto_rows = AutoRowsFactory() # The auto rows factory

def test_flexbox_and_grid_auto_cols_rows_examples(
):
    """Test grid auto columns and rows utilities."""
    # Test grid auto columns/rows
    assert str(auto_cols.auto) == "auto-cols-auto"
    assert str(auto_cols.min) == "auto-cols-min"
    assert str(auto_cols.max) == "auto-cols-max"
    assert str(auto_cols.fr) == "auto-cols-fr"
    assert str(auto_cols("200px")) == "auto-cols-[200px]"
    assert str(auto_cols("--size")) == "auto-cols-(--size)"
    
    assert str(auto_rows.auto) == "auto-rows-auto"
    assert str(auto_rows.min) == "auto-rows-min"
    assert str(auto_rows.max) == "auto-rows-max"
    assert str(auto_rows.fr) == "auto-rows-fr"
    assert str(auto_rows("minmax(0, 1fr)")) == "auto-rows-[minmax(0, 1fr)]"

# Run the tests
test_flexbox_and_grid_auto_cols_rows_examples()

Gap Utilities

Control gutters between grid and flexbox items.

---

GapFactory

def GapFactory(
    
):

Special factory for gap utilities that use hyphenated directions.

---

test_flexbox_and_grid_gap_examples

def test_flexbox_and_grid_gap_examples(
    
):

Test gap utilities for flexbox and grid containers.

gap = GapFactory() # The gap factory

# Note: gap.x creates gap-x-* classes (column-gap)
# Note: gap.y creates gap-y-* classes (row-gap)

def test_flexbox_and_grid_gap_examples(
):
    """Test gap utilities for flexbox and grid containers."""
    # Test gap utilities
    assert str(gap(0)) == "gap-0"
    assert str(gap(4)) == "gap-4"
    assert str(gap(8)) == "gap-8"
    assert str(gap.px) == "gap-px"
    
    # Directional gaps
    assert str(gap.x(4)) == "gap-x-4"
    assert str(gap.y(2)) == "gap-y-2"
    
    # Arbitrary values
    assert str(gap("20px")) == "gap-[20px]"
    assert str(gap("--spacing")) == "gap-(--spacing)"

# Run the tests
test_flexbox_and_grid_gap_examples()

Justify Content Utilities

Control how flex and grid items are positioned along a container’s main axis.

JUSTIFY_CONTENT_VALUES = { # Justify content values
    "start": "justify-start",
    "end": "justify-end",
    "end-safe": "justify-end-safe",
    "center": "justify-center",
    "center-safe": "justify-center-safe",
    "between": "justify-between",
    "around": "justify-around",
    "evenly": "justify-evenly",
    "stretch": "justify-stretch",
    "baseline": "justify-baseline",
    "normal": "justify-normal"
}

# Create justify content factory
justify = SimpleFactory(JUSTIFY_CONTENT_VALUES, "Justify content utilities for positioning flex/grid items along container's main axis") # The justify content factory

Justify Items Utilities

Control how grid items are aligned along their inline axis.

JUSTIFY_ITEMS_VALUES = { # Justify items values
    "start": "justify-items-start",
    "end": "justify-items-end",
    "end-safe": "justify-items-end-safe",
    "center": "justify-items-center",
    "center-safe": "justify-items-center-safe",
    "stretch": "justify-items-stretch",
    "normal": "justify-items-normal"
}

# Create justify items factory
justify_items = SimpleFactory(JUSTIFY_ITEMS_VALUES, "Justify items utilities for aligning grid items along their inline axis") # The justify items factory

Justify Self Utilities

Control how an individual grid item is aligned along its inline axis.

---

test_flexbox_and_grid_justify_examples

def test_flexbox_and_grid_justify_examples(
    
):

Test justify utilities for flex and grid containers.

JUSTIFY_SELF_VALUES = { # Justify self values
    "auto": "justify-self-auto",
    "start": "justify-self-start",
    "center": "justify-self-center",
    "center-safe": "justify-self-center-safe",
    "end": "justify-self-end",
    "end-safe": "justify-self-end-safe",
    "stretch": "justify-self-stretch"
}

# Create justify self factory
justify_self = SimpleFactory(JUSTIFY_SELF_VALUES, "Justify self utilities for aligning individual grid items along their inline axis") # The justify self factory

def test_flexbox_and_grid_justify_examples(
):
    """Test justify utilities for flex and grid containers."""
    # Test justify utilities
    assert str(justify.start) == "justify-start"
    assert str(justify.center) == "justify-center"
    assert str(justify.between) == "justify-between"
    assert str(justify.evenly) == "justify-evenly"
    
    assert str(justify_items.center) == "justify-items-center"
    assert str(justify_items.stretch) == "justify-items-stretch"
    
    assert str(justify_self.auto) == "justify-self-auto"
    assert str(justify_self.end) == "justify-self-end"

# Run the tests
test_flexbox_and_grid_justify_examples()

Align Content Utilities

Control how rows are positioned in multi-row flex and grid containers.

ALIGN_CONTENT_VALUES = { # Align content values
    "normal": "content-normal",
    "center": "content-center",
    "start": "content-start",
    "end": "content-end",
    "between": "content-between",
    "around": "content-around",
    "evenly": "content-evenly",
    "baseline": "content-baseline",
    "stretch": "content-stretch"
}

# Create align content factory
content = SimpleFactory(ALIGN_CONTENT_VALUES, "Align content utilities for positioning rows in multi-row flex/grid containers") # The align content factory

Align Items Utilities

Control how flex and grid items are positioned along a container’s cross axis.

ALIGN_ITEMS_VALUES = { # Align items values
    "start": "items-start",
    "end": "items-end",
    "end-safe": "items-end-safe",
    "center": "items-center",
    "center-safe": "items-center-safe",
    "baseline": "items-baseline",
    "baseline-last": "items-baseline-last",
    "stretch": "items-stretch"
}

# Create align items factory
items = SimpleFactory(ALIGN_ITEMS_VALUES, "Align items utilities for positioning flex/grid items along container's cross axis") # The align items factory

Align Self Utilities

Control how an individual flex or grid item is positioned along its container’s cross axis.

---

test_flexbox_and_grid_align_examples

def test_flexbox_and_grid_align_examples(
    
):

Test align utilities for flex and grid containers.

ALIGN_SELF_VALUES = { # Align self values
    "auto": "self-auto",
    "start": "self-start",
    "end": "self-end",
    "end-safe": "self-end-safe",
    "center": "self-center",
    "center-safe": "self-center-safe",
    "stretch": "self-stretch",
    "baseline": "self-baseline",
    "baseline-last": "self-baseline-last"
}

# Create align self factory
self_align = SimpleFactory(ALIGN_SELF_VALUES, "Align self utilities for positioning individual flex/grid items along container's cross axis") # The align self factory (renamed to avoid conflict with Python's self)

def test_flexbox_and_grid_align_examples(
):
    """Test align utilities for flex and grid containers."""
    # Test align utilities
    assert str(content.center) == "content-center"
    assert str(content.between) == "content-between"
    assert str(content.stretch) == "content-stretch"
    
    assert str(items.center) == "items-center"
    assert str(items.start) == "items-start"
    assert str(items.baseline) == "items-baseline"
    
    assert str(self_align.auto) == "self-auto"
    assert str(self_align.center) == "self-center"
    assert str(self_align.stretch) == "self-stretch"

# Run the tests
test_flexbox_and_grid_align_examples()

Place Content Utilities

Control how content is justified and aligned at the same time.

PLACE_CONTENT_VALUES = { # Place content values
    "center": "place-content-center",
    "center-safe": "place-content-center-safe",
    "start": "place-content-start",
    "end": "place-content-end",
    "end-safe": "place-content-end-safe",
    "between": "place-content-between",
    "around": "place-content-around",
    "evenly": "place-content-evenly",
    "baseline": "place-content-baseline",
    "stretch": "place-content-stretch"
}

# Create place content factory
place_content = SimpleFactory(PLACE_CONTENT_VALUES, "Place content utilities for aligning content both horizontally and vertically") # The place content factory

Place Items Utilities

Control how items are justified and aligned at the same time.

PLACE_ITEMS_VALUES = { # Place items values
    "start": "place-items-start",
    "end": "place-items-end",
    "end-safe": "place-items-end-safe",
    "center": "place-items-center",
    "center-safe": "place-items-center-safe",
    "baseline": "place-items-baseline",
    "stretch": "place-items-stretch"
}

# Create place items factory
place_items = SimpleFactory(PLACE_ITEMS_VALUES, "Place items utilities for aligning items both horizontally and vertically") # The place items factory

Place Self Utilities

Control how an individual item is justified and aligned at the same time.

---

test_flexbox_and_grid_place_examples

def test_flexbox_and_grid_place_examples(
    
):

Test place utilities for grid containers.

PLACE_SELF_VALUES = { # Place self values
    "auto": "place-self-auto",
    "start": "place-self-start",
    "end": "place-self-end",
    "end-safe": "place-self-end-safe",
    "center": "place-self-center",
    "center-safe": "place-self-center-safe",
    "stretch": "place-self-stretch"
}

# Create place self factory
place_self = SimpleFactory(PLACE_SELF_VALUES, "Place self utilities for aligning individual items both horizontally and vertically") # The place self factory

def test_flexbox_and_grid_place_examples(
):
    """Test place utilities for grid containers."""
    # Test place utilities
    assert str(place_content.center) == "place-content-center"
    assert str(place_content.between) == "place-content-between"
    
    assert str(place_items.center) == "place-items-center"
    assert str(place_items.stretch) == "place-items-stretch"
    
    assert str(place_self.auto) == "place-self-auto"
    assert str(place_self.center) == "place-self-center"

# Run the tests
test_flexbox_and_grid_place_examples()

Practical Examples

Let’s see how to use these flexbox and grid utilities in real FastHTML components:

---

test_flexbox_and_grid_fasthtml_examples

def test_flexbox_and_grid_fasthtml_examples(
    
):

Test flexbox and grid utilities in practical FastHTML component examples.

def test_flexbox_and_grid_fasthtml_examples(
):
    """Test flexbox and grid utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Header, Nav, Main, Article, Aside, Footer, Img, Button, H1, H2, P
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.typography import font_weight, font_size, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.sizing import h, min_h
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    
    # Flexbox centered navigation
    nav = Nav(
        Div("Logo", cls=str(font_weight.bold)),
        Div(
            "Home", "About", "Contact",
            cls=combine_classes(flex_display, gap(4))
        ),
        Button("Sign In"),
        cls=combine_classes(
            flex_display, 
            justify.between, 
            items.center, 
            p.x(6), 
            p.y(4)
        )
    )
    assert nav.attrs['class'] == "flex justify-between items-center px-6 py-4"
    
    # Grid layout for cards
    card_grid = Div(
        *[Div(f"Card {i}", cls=combine_classes(p(4), bg.gray._100, rounded.full)) for i in range(6)],
        cls=combine_classes(
            grid_display,
            grid_cols(1),     # 1 column on mobile
            grid_cols(2).md, # 2 columns on medium screens
            grid_cols(3).lg, # 3 columns on large screens
            gap(4)
        )
    )
    assert card_grid.attrs['class'] == "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    
    # Flexbox vertical centering
    hero = Div(
        H1("Welcome", cls=combine_classes(font_size._4xl, font_weight.bold)),
        P("Build amazing things"),
        Button("Get Started", cls=str(m.t(4))),
        cls=combine_classes(
            flex_display,
            flex_direction.col,
            justify.center,
            items.center,
            min_h.screen,
            text_align.center
        )
    )
    assert hero.attrs['class'] == "flex flex-col justify-center items-center min-h-screen text-center"
    
    # Complex grid layout with spanning
    dashboard = Div(
        # Header spans full width
        Header("Dashboard", cls=combine_classes(col_span.full, p(4), bg.blue._500, text_color.white)),
        
        # Sidebar
        Aside("Sidebar", cls=combine_classes(row_span(2), p(4), bg.gray._200)),
        
        # Main content
        Main("Main Content", cls=combine_classes(col_span(2), p(4))),
        
        # Stats cards
        Div("Stat 1", cls=combine_classes(p(4), bg.green._100)),
        Div("Stat 2", cls=combine_classes(p(4), bg.yellow._100)),
        
        cls=combine_classes(
            grid_display,
            grid_cols(3),
            grid_rows(3),
            gap(4),
            h.screen
        )
    )
    assert dashboard.attrs['class'] == "grid grid-cols-3 grid-rows-3 gap-4 h-screen"
    
    # Flexbox with growing/shrinking items
    toolbar = Div(
        Button("Back", cls=str(shrink(0))),  # Don't shrink
        Div("Search...", cls=combine_classes(grow(), p.x(4), bg.gray._100, rounded.full)),  # Take available space
        Button("Settings", cls=str(shrink(0))),  # Don't shrink
        cls=combine_classes(flex_display, gap(2), items.center, p(2))
    )
    assert toolbar.attrs['class'] == "flex gap-2 items-center p-2"
    assert toolbar.children[1].attrs['class'] == "grow-1 px-4 bg-gray-100 rounded-full"
    
    # Return all examples in a grid layout
    return Div(
        nav,
        card_grid,
        hero,
        dashboard,
        toolbar,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_flexbox_and_grid_fasthtml_examples()

Logo

HomeAboutContact

Card 0

Card 1

Card 2

Card 3

Card 4

Card 5

Welcome

Build amazing things

Dashboard

Sidebar

Main Content

Stat 1

Stat 2

Search...

test_func = test_flexbox_and_grid_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Helper Functions

Convenient functions for common flexbox and grid patterns:

---

flex_center

def flex_center(
    
)->str: # Combined CSS classes for centered flex container

Create classes for a flex container that centers its content.

---

flex_between

def flex_between(
    
)->str: # Combined CSS classes for flex container with space between

Create classes for a flex container with space between items.

---

flex_col_center

def flex_col_center(
    
)->str: # Combined CSS classes for centered vertical flex container

Create classes for a vertical flex container that centers its content.

---

grid_center

def grid_center(
    
)->str: # Combined CSS classes for centered grid container

Create classes for a grid container that centers its content.

---

responsive_grid

def responsive_grid(
    mobile:int=1, # Number of columns on mobile devices
    tablet:int=2, # Number of columns on tablet devices
    desktop:int=3, # Number of columns on desktop devices
    gap_size:Union=4, # Gap size between grid items
)->str: # Combined CSS classes for responsive grid

Create responsive grid classes with customizable breakpoints.

---

test_flexbox_and_grid_helper_examples

def test_flexbox_and_grid_helper_examples(
    
):

Test helper functions for common flexbox and grid patterns.

def test_flexbox_and_grid_helper_examples(
):
    """Test helper functions for common flexbox and grid patterns."""
    # Test helper functions
    assert flex_center() == "flex justify-center items-center"
    assert flex_between() == "flex justify-between items-center"
    assert flex_col_center() == "flex flex-col justify-center items-center"
    assert grid_center() == "grid place-items-center"
    assert responsive_grid() == "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    assert responsive_grid(1, 3, 4, 6) == "grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6" # Custom responsive grid

# Run the tests
test_flexbox_and_grid_helper_examples()

Export