Skip to content

🟰  Row Layout

Submitted by Lukas Masuch

Summary

A multi-element horizontal container that places elements in a row.

Functions

row

Insert a multi-element, horizontal container into your app.

This function inserts a container into your app that can hold a number of elements as defined in the provided spec. Elements can be added to the returned container by calling methods directly on the returned object.

Parameters:

Name Type Description Default
spec SpecType

Controls the number and width of cells to insert in the row. Can be one of:

  • An integer specifying the number of cells. All cells will have equal width in this case.
  • An iterable of numbers (int or float) that specifies the relative width of each cell. For instance, [0.7, 0.3] creates two cells where the first one occupies 70% of the available width, and the second one occupies 30%. Or, [1, 2, 3] creates three cells where the second one is twice as wide as the first one, and the third one is three times that width.
 required
gap Optional[str]

The size of the gap between cells, can be "small", "medium", or "large". Defaults to "small".

 'small'
vertical_align Literal['top', 'center', 'bottom']

The vertical alignment of the cells in the row. Defaults to "top".

 'top'

Returns:

Type Description
GridDeltaGenerator

grid.GridDeltaGenerator: A row container object. Elements can be added to this row by calling methods directly on the returned object.

Deprecated

This function is deprecated. Use st.container(horizontal=True) instead.

Source code in src/streamlit_extras/row/__init__.py 
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@extra
def row(
    spec: SpecType,
    gap: GapSize = "small",
    vertical_align: Literal["top", "center", "bottom"] = "top",
) -> grid.GridDeltaGenerator:
    """Insert a multi-element, horizontal container into your app.

    This function inserts a container into your app that can hold
    a number of elements as defined in the provided spec. Elements can be added
    to the returned container by calling methods directly on the returned object.

    Args:
        spec (SpecType): Controls the number and width of cells to insert in the row.
            Can be one of:

            * An integer specifying the number of cells. All cells will have equal
              width in this case.
            * An iterable of numbers (int or float) that specifies the relative width
              of each cell. For instance, ``[0.7, 0.3]`` creates two cells where the
              first one occupies 70% of the available width, and the second one
              occupies 30%. Or, ``[1, 2, 3]`` creates three cells where the second one
              is twice as wide as the first one, and the third one is three times that
              width.
        gap (Optional[str], optional): The size of the gap between cells, can be
            "small", "medium", or "large". Defaults to "small".
        vertical_align (Literal["top", "center", "bottom"], optional): The vertical
            alignment of the cells in the row. Defaults to "top".

    Returns:
        grid.GridDeltaGenerator: A row container object. Elements can be added to this
            row by calling methods directly on the returned object.

    !!! warning "Deprecated"
        This function is deprecated. Use
        [`st.container(horizontal=True)`](https://docs.streamlit.io/develop/api-reference/layout/st.container)
        instead.
    """
    show_deprecation_warning(
        "row is deprecated. Use `st.container(horizontal=True)` instead. "
        "See https://docs.streamlit.io/develop/api-reference/layout/st.container",
        show_once=True,
    )
    container = st.container()

    return grid.GridDeltaGenerator(parent_dg=container, spec=[spec], gap=gap, vertical_align=vertical_align)

Import:

from streamlit_extras.row import row # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example() -> None:
    random_df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

    row1 = row(2, vertical_align="center")
    row1.dataframe(random_df, width="stretch")
    row1.line_chart(random_df, width="stretch")

    row2 = row([2, 4, 1], vertical_align="bottom")

    row2.selectbox("Select Country", ["Germany", "Italy", "Japan", "USA"])
    row2.text_input("Your name")
    row2.button("Send", width="stretch")
Output (beta)