Layout

The GridLayout component provides options for controlling its appearance. It enables you to define the number of rows and columns in the CSS Grid, the gap between them and the alignment of the inner elements.

Rows and Columns

To configure the number of rows and columns in the GridLayout, utilize the rows and cols properties. Both properties accept an array as a value, which serves two purposes:

• The number of elements in the array defines the numbers of rows or columns respectively.
• Each array element defines the size of the corresponding row or column. The possible array values are:
  • number—Defines the size in pixels.
  • string—Enables the usage of arbitrary units e.g. 20% or auto.
  • GridLayoutRowSize or GridLayoutColSize—Configuration objects, which accepts width or height keys respectively.

The following example demonstrates how to define the number of rows and columns of the GridLayout.

Gap

In order to set the gap between the GridLayout inner elements, utilize the gap property. It accepts a configuration object with rows and col keys, which define the gap between the rows and columns respectively. The size of the gap can be passed as a number, which will be treated as pixels, or as a string, which allows setting custom CSS units.

By default, the GridLayout does not apply a gap.

The following example demonstrates how to define the gap between the rows and columns of the GridLayout.

Alignment

To set the alignment of the inner GridLayout elements, use the align property. It accepts an AlignSettings configuration object with horizontal and vertical keys. This allows you to control the alignment based on the X and Y axes.

The available horizontal alignment options are:

• start—Uses the start point of the X axis of the container.
• center—Uses the central point of the X axis of the container.
• end—Uses the end point of the X axis of the container.
• stretch (Default)—Stretches the items to fill the width of the container.

The available vertical alignment options are:

• top—Uses the start point of the Y axis of the container.
• middle—Uses the central point of the Y axis of the container.
• bottom—Uses the end point of the Y axis of the container.
• stretch (Default)—Stretches the items to fill the height of the container.

The following example demonstrates the different alignment options in action.

Suggested Links

• API Reference of the GridLayout