Skip to content

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 is 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 are associated with the generated HTML Element.
These class names are added to the default taipy-layout class name.

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.

Usage

Default layout

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

Definition

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

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

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

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

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.