Layout (Flex and Grid) API Reference

This page covers `Grid`s, which are often used for general structure, `Flex` which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page

Grid

Column 1 Item 1

Column 1 Item 2

Column 1 Item 3

Column 2 Item 1

Column 2 Item 2

Column 2 Item 3

Column 3 Item 1

Column 3 Item 2

Column 3 Item 3

def ex_grid():
    return Grid(
        Div(
            P("Column 1 Item 1"), 
            P("Column 1 Item 2"), 
            P("Column 1 Item 3")),
        Div(
            P("Column 2 Item 1"), 
            P("Column 2 Item 2"), 
            P("Column 2 Item 3")),
        Div(
            P("Column 3 Item 1"), 
            P("Column 3 Item 2"), 
            P("Column 3 Item 3")))

Grid

Source

Grid(*div, cols_min: int = 1, cols_max: int = 4, cols_sm: int = None, cols_md: int = None, cols_lg: int = None, cols_xl: int = None, cols: int = None, cls='gap-4', **kwargs) -> fastcore.xml.FT

Creates a responsive grid layout with smart defaults based on content

Params

div Div components to put in the grid
cols_min Minimum number of columns at any screen size
cols_max Maximum number of columns allowed at any screen size
cols_sm Number of columns on small screens
cols_md Number of columns on medium screens
cols_lg Number of columns on large screens
cols_xl Number of columns on extra large screens
cols Number of columns on all screens
cls Additional classes on the grid (tip: gap provides spacing for grids)
kwargs

Returns: Responsive grid component

Practical Grid Example

Laptop

$999

Smartphone

$599

Headphones

$199

Smartwatch

$299

Tablet

$449

Camera

$799

def ex_product_grid():
    products = [
        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
    ]
    
    product_cards = [
        Card(
            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
            H4(p["name"], cls="mt-2"),
            P(p["price"], cls=TextPresets.bold_sm),
            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
        ) for p in products
    ]
    
    return Grid(*product_cards, cols_lg=3)

Flex

Play Flex Box Froggy to get an understanding of flex box.

DivFullySpaced

Source

DivFullySpaced(*c, cls='w-full', **kwargs)

Creates a flex div with it's components having as much space between them as possible

Params

c Components
cls Classes for outer div (w-full makes it use all available width)
kwargs

def ex_fully_spaced_div():
    return DivFullySpaced(
        Button("Left", cls=ButtonT.primary),
        Button("Center", cls=ButtonT.secondary),
        Button("Right", cls=ButtonT.destructive)
    )

DivCentered

Source

DivCentered(*c, cls='space-y-4', vstack=True, **kwargs) -> fastcore.xml.FT

Creates a flex div with it's components centered in it

Params

c Components
cls Classes for outer div (space-y-4 provides spacing between components)
vstack Whether to stack the components vertically
kwargs

Returns: Div with components centered in it

Centered Title

This content is centered both horizontally and vertically.

def ex_centered_div():
    return DivCentered(
        H3("Centered Title"),
        P("This content is centered both horizontally and vertically.")
    )

DivLAligned

Source

DivLAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

Creates a flex div with it's components aligned to the left

Params

c Components
cls Classes for outer div
kwargs

Returns: Div with components aligned to the left

Left Aligned Title

Some text that's left-aligned with the title and image.

def ex_l_aligned_div():
    return DivLAligned(
        Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
        H4("Left Aligned Title"),
        P("Some text that's left-aligned with the title and image.")
    )

DivRAligned

Source

DivRAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

Creates a flex div with it's components aligned to the right

Params

c Components
cls Classes for outer div
kwargs

Returns: Div with components aligned to the right

Right-aligned text

def ex_r_aligned_div():
    return DivRAligned(
        Button("Action", cls=ButtonT.primary),
        P("Right-aligned text"),
        Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
    )

DivVStacked

Source

DivVStacked(*c, cls='space-y-4', **kwargs) -> fastcore.xml.FT

Creates a flex div with it's components stacked vertically

Params

c Components
cls Additional classes on the div (tip: space-y-4 provides spacing between components)
kwargs

Returns: Div with components stacked vertically

Vertical Stack

First paragraph in the stack

Second paragraph in the stack

def ex_v_stacked_div():
    return DivVStacked(
        H2("Vertical Stack"),
        P("First paragraph in the stack"),
        P("Second paragraph in the stack"),
        Button("Action Button", cls=ButtonT.secondary)
    )

DivHStacked

Source

DivHStacked(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT

Creates a flex div with it's components stacked horizontally

Params

c Components
cls Additional classes on the div (space-x-4 provides spacing between components)
kwargs

Returns: Div with components stacked horizontally

Column 1

Content for column 1

Column 2

Content for column 2

Column 3

Content for column 3

def ex_h_stacked_div():
    return DivHStacked(
        Div(H4("Column 1"), P("Content for column 1")),
        Div(H4("Column 2"), P("Content for column 2")),
        Div(H4("Column 3"), P("Content for column 3"))
    )

FlexT

Flexbox modifiers using Tailwind CSS

Option	Value	Option	Value	Option	Value	Option	Value
block	flex	inline	inline-flex	left	justify-start	center	justify-center
right	justify-end	between	justify-between	around	justify-around	stretch	items-stretch
top	items-start	middle	items-center	bottom	items-end	row	flex-row
row_reverse	flex-row-reverse	column	flex-col	column_reverse	flex-col-reverse	nowrap	flex-nowrap
wrap	flex-wrap	wrap_reverse	flex-wrap-reverse