Example Layouts

GridLayout

By default, each item in a GridLayout will take up one row and one column. This can be changed by setting the row_span and column_span properties of the item.

html.P("Grid cells can span multiple rows and/or columns.", classes="text-center")
with GridLayout(columns=3, height=400, halign="center", valign="center"):
    # The classes parameter is used to highlight the different cells for demonstration purposes.
    vuetify.VLabel("Item 1", classes="bg-primary h-100 w-100 justify-center")
    vuetify.VLabel("Item 2", classes="bg-secondary h-100 w-100 justify-center")
    vuetify.VLabel("Row Span", classes="bg-primary h-100 w-100 justify-center", row_span=2)
    vuetify.VLabel("Column Span", classes="bg-error h-100 w-100 justify-center", column_span=2)
    vuetify.VLabel(
        "Row and Column Span",
        classes="bg-secondary h-100 w-100 justify-center",
        row_span=2,
        column_span=3,
    )

Result:

GridLayout containings cells that span multiple rows and columns.

GridLayout with whitespace

Trying this with HBoxLayout or VBoxLayout will produce unpredictable behavior.

html.P("Grid cells can be left blank.", classes="text-center")
with GridLayout(columns=3):
    vuetify.VSheet()
    InputField(label="Input 1")
    vuetify.VSheet()
    InputField(label="Input 2")
    vuetify.VSheet()
    InputField(label="Input 3")

Result:

GridLayout containing cells that alternate between cells containing whitespace and content.

HBoxLayout containing VBoxLayout

html.P(
    "HBoxLayout can contain VBoxLayouts.",
    classes="text-center",
)
with HBoxLayout():
    with VBoxLayout(classes="bg-primary pa-2"):
        vuetify.VLabel("VBoxLayout 1 - Item 1", classes="mb-4")
        vuetify.VLabel("VBoxLayout 1 - Item 2")
    with VBoxLayout(classes="bg-secondary pa-2", halign="center", width=600):
        vuetify.VLabel("VBoxLayout 2 - Item 1", classes="mb-4")
        vuetify.VLabel("VBoxLayout 2 - Item 2")

Result:

HBoxLayout containing VBoxLayouts.

VBoxLayout containing HBoxLayout

html.P(
    "VBoxLayout can contain HBoxLayouts.",
    classes="text-center",
)
with VBoxLayout():
    with HBoxLayout(classes="bg-primary", halign="space-around"):
        vuetify.VLabel("HBoxLayout 1 - Item 1")
        vuetify.VLabel("HBoxLayout 1 - Item 2")
        vuetify.VLabel("HBoxLayout 1 - Item 3")
    with HBoxLayout(classes="bg-secondary", halign="space-around"):
        vuetify.VLabel("HBoxLayout 2 - Item 1")
        vuetify.VLabel("HBoxLayout 2 - Item 2")
        vuetify.VLabel("HBoxLayout 2 - Item 3")

Result:

VBoxLayout containing HBoxLayouts.

GridLayout containing BoxLayouts

html.P("GridLayout can also contain HBoxLayouts and VBoxLayouts.", classes="text-center")
with GridLayout(columns=10):
    with HBoxLayout(classes="bg-primary", column_span=7, halign="space-around"):
        vuetify.VLabel("HBoxLayout Item 1")
        vuetify.VLabel("HBoxLayout Item 2")
    with VBoxLayout(classes="bg-secondary", column_span=3, halign="center"):
        vuetify.VLabel("VBoxLayout Item 1")
        vuetify.VLabel("VBoxLayout Item 2")

Result:

GridLayout containing BoxLayouts.