`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		List of CSS class names that will be associated with the generated HTML Element. This class names will be added to the default `taipy-<element_type>`.
`hover_text`	dynamic(str)		Information that is displayed when the user hovers over this element.

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

Usage¶

Default layout¶

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

Page content

Markdown

<|layout|

    <|{some content}|>

|>

HTML

<taipy:layout>

    <taipy:text>{some content}</taipy:text>

</taipy:layout>

Specifying gap¶

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

Page content

Markdown

<|layout|gap=20px|
    ...
    <|{some content}|>
    ...
|>

HTML

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

Layout with a central "greedy" column¶

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

Page content

Markdown

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

    <|{1st column content}|>

    <|{2nd column content}|>

    <|{3rd column content}|>

    <|{1st column and second row content}|>

    ...
|>

HTML

<taipy:layout columns="50px 1fr 50px">
    <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}</taipy:text>
    </taipy:part>
    <taipy:part>
        <taipy:text>{1st column and second row content}</taipy:text>
    </taipy:part>
    ...
</taipy:layout>

Different layout for desktop and mobile devices¶

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

Page content

Markdown

<|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}|>

    ...
|>

HTML

<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>