ReferenceAdvancedLay content out side by side.

Row

Description

A Row is a Div that arranges its contents side by side instead of stacked, with everything vertically centered. Use it when several pieces of content belong on one line, such as a label next to its text box, a strip of buttons, or the columns of a card.

Syntax

Row(content, more_content, ...)

Parameters

Row takes any number of strings and components as positional arguments, laid out left to right. Like every component, it accepts styling and attribute keywords.

Examples

from drafter import *


@route
def index() -> Page:
    return Page([
        Header("Mission Control"),
        Row("Callsign:", TextBox("callsign", "Rubber Duck 1")),
        Row(
            Button("Launch", "index"),
            Button("Abort", "index"),
            Button("Snacks", "index")
        ),
        Row(
            Div("LEFT PANEL", style_padding="10px",
                style_background_color="lavender"),
            Div("RIGHT PANEL", style_padding="10px",
                style_background_color="honeydew")
        )
    ])


start_server()

Notes

Internally, a Row is a div that uses flexbox (display: flex; flex-direction: row; align-items: center), so any flexbox technique can be applied through style_ keywords: style_gap="12px" adds space between the children, and style_justify_content="space-between" spreads them apart.
Rows do not wrap by default, so children that are too wide will overflow the row. Setting style_flex_wrap="wrap" allows the contents to wrap onto additional lines.
In tests, a Row compares equal to a plain Div with the same contents and settings, so refactoring between them does not break structural assertions.

Div (Box): the same kind of container, without the side-by-side layout.
Table: a better fit when the side-by-side content is really rows and columns of data.

External links

Flexbox on MDN

Row