Layout
The GridLayout component provides options for controlling its appearance.
To customize the layout of the GridLayout, use any of the following configuration options:
Rows and columns
To configure the GridLayout, use the rows and cols properties.
Example
View Source
Change Theme:
Gaps
To set the GridLayout gaps, use the gap property.
By default, the GridLayout does not apply a gap.
Example
View Source
Change Theme:
Horizontal alignment
To set the GridLayout horizontal alignment, use the align property. The horizontal key controls the alignment of the inner elements based on the X axis.
The available values are:
start—Uses the start point of the container.center—Uses the central point of the container.end—Uses the end point of the container.- (Default)
stretch—Stretches the items to fill the width of the container.
Example
View Source
Change Theme:
Vertical alignment
To set the GridLayout horizontal alignment, use the align property. The vertical key controls the alignment of the inner elements based on the Y axis.
The available values are:
top—Uses the top point of the container.middle—Uses the middle point of the container.bottom—Uses the bottom point of the container.- (Default)
stretch—Stretches the items to fill the height of the container.
Example
View Source
Change Theme:
