`layout`

Organizes its children into cells in a regular grid.

The columns property follows the CSS standard syntax. If the columns property contains only digits and spaces, it is considered as flex-factor unit: "1 1" => "1fr 1fr"

Properties¶

Name	Type	Default	Description
`columns`^(★)	`str`	"1 1"	The list of weights for each column. For example, `"1 2"` creates a 2 column grid: 1fr 2fr The creation of multiple same size columns can be simplified by using the multiply sign eg. "5*1" is equivalent to "1 1 1 1 1".
`columns[mobile]`	`str`	"1"	The list of weights for each column, when displayed on a mobile device. The syntax is the same as for columns.
`gap`	`str`	"0.5rem"	The size of the gap between the columns.
`id`	`str`		The identifier that will be assigned to the rendered HTML component.
`properties`	`dict[str, any]`		Bound to a dictionary that contains additional properties for this element.
`class_name`	`str` dynamic		The list of CSS class names that will be associated with the generated HTML Element. These class names will be added to the default `taipy-<element_type>`.
`hover_text`	`str` dynamic		The information that is displayed when the user hovers over this element.

^(★)columns is the default property for this visual element.

Styling¶

All the layout blocks are generated with the "taipy-layout" CSS class. You can use this class name to select the layout blocks on your page and apply style.

Stylekit support¶

The Stylekit provides specific classes that you can use to style layout blocks:

align-columns-top
Aligns the content to the top of each column.
align-columns-center
Aligns the content to the center of each column.
align-columns-bottom
Aligns the content to the bottom of each column.
align-columns-stretch
Gives all columns the height of the highest column.

Additional classes are defined for the part block element when inserted in a layout block. Please see the section on styling for parts for more details.

Usage¶

Default layout¶

The default layout contains 2 columns in desktop mode and 1 column in mobile mode.

Definition

MarkdownHTMLPython

<|layout|

<|{some_content}|>

|>

<taipy:layout>

    <taipy:text>{some_content}</taipy:text>

</taipy:layout>

import taipy.gui.builder as tgb
...
with tgb.layout()
    tgb.text("{some_content}")

Specifying gap¶

The gap between adjacent cells is set by default to 0.5rem and can be specified using the gap property.

Definition

MarkdownHTMLPython

<|layout|gap=20px|
...
<|{some_content}|>
...
|>

<taipy:layout gap="20px">
    ...
    <taipy:text>{some_content}</taipy:text>>
    ...
</taipy:layout>

import taipy.gui.builder as tgb
...
with tgb.layout(gap="20px")
    tgb.text("{some_content}")

Layout with a central "greedy" column¶

You can use the fr CSS unit so that the middle column use all the available space.

Definition

MarkdownHTMLPython

<|layout|columns=50px 1fr 50px|

<|1st column content|>

<|2nd column content|>

<|3rd column content|>

<|1st column and second row content|>

...
|>

<taipy:layout columns="50px 1fr 50px">
    <taipy:part>
        <taipy:text>1st column content</taipy:text>
    </taipy:part>
    <taipy:part>
        <taipy:text>2nd column content</taipy:text>
    </taipy:part>
    <taipy:part>
        <taipy:text>3rd column content</taipy:text>
    </taipy:part>
    <taipy:part>
        <taipy:text>1st column and second row content</taipy:text>
    </taipy:part>
    ...
</taipy:layout>

import taipy.gui.builder as tgb
...
with tgb.layout(columns="50px 1fr 50px")
    with tgb.part()
        tgb.text("1st column content")
    with tgb.part()
        tgb.text("2nd column content")
    with tgb.part()
        tgb.text("3rd column content")
    with tgb.part()
        tgb.text("1st column and second row content")

Different layout for desktop and mobile devices¶

The columns[mobile] property allows to specify a different layout when running on a mobile device.

Definition

MarkdownHTMLPython

<|layout|columns=50px 1fr 50px|columns[mobile]=1 1|

<|1st column content|>

<|2nd column content|>

<|3rd column content or 2nd row 1st column on mobile|>

<|1st column and second row content or 2nd row 2nd column on mobile|>

...
|>

<taipy:layout columns="50px 1fr 50px" columns[mobile]="1 1">
    <taipy:part>
        <taipy:text>1st column content</taipy:text>
    </taipy:part>
    <div>
        <taipy:text>2nd column content</taipy:text>
    </div>
    <taipy:part>
        <taipy:text>3rd column content or 2nd row 1st column on mobile</taipy:text>
    </taipy:part>
    <taipy:part>
        <taipy:text>1st column and second row content or 2nd row 2nd column on mobile</taipy:text>
    </taipy:part>
    ...
</taipy:layout>

import taipy.gui.builder as tgb
...
with tgb.layout(columns="50px 1fr 50px", columns__mobile="1 1")
    with tgb.part()
        tgb.text("1st column content")
    with tgb.part()
        tgb.text("2nd column content")
    with tgb.part()
        tgb.text("3rd column content or 2nd row 1st column on mobile")
    with tgb.part()
        tgb.text("1st column and second row content or 2nd row 2nd column on mobile")