Layout

Layout is used to create macro layouts that responds to different media sizes.

Props

optional = ?

Name Type Description
inlineAlignment? "leading" | "trailing" Specifies the inline alignment of the layout in its container. By default, it will be centered.
blockAlignment? "center" | "trailing" Specifies the block alignment of the layout in its container. By default, it will be leading.
maxInlineSize? number Default maximum inline size of the layout within its viewport. The size specified will constrain the space available for its sections and will be centered in the viewport unless specified otherwise with inlineAlignment.

Numbers less than or equal to 1 are treated as percentages and numbers greater than 1 are treated as pixels.

Examples: - 500 represents 500px - 0.5 represents 50% - 1 represents 100%
sizes? "auto" | "fill" | number[] Default sizes for each section of the layout
media? Media[] Sizes at different media

Media

Name Type Description
viewportSize "small" | "medium" | "large"
maxInlineSize? number Maximum inline size of the layout for this viewport. The size specified will constrain the space available for its sections and will be centered in the viewport unless specified otherwise with inlineAlignment.

Numbers less than or equal to 1 are treated as percentages and numbers greater than 1 are treated as pixels.

Examples: - 500 represents 500px - 0.5 represents 50% - 1 represents 100%
sizes? "auto" | "fill" | number[] Sizes for each section of the layout for this media. If a maxInlineSize is specified, make sure you adapt your pixel values accordingly.