GridLayoutProps

Specifies the horizontal and vertical alignment of the inner GridLayout elements (see example).

The possible keys are:

• horizontal—Defines the possible horizontal alignment of the inner GridLayout elements.
  • 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.
• vertical— Defines the possible vertical alignment of the inner GridLayout elements.
  • 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:

<GridLayout align={{ horizontal: 'center', vertical: 'middle' }} />

The React elements that will be rendered inside the GridLayout (see example).

Example:

<GridLayout>
  <div>Item 1</div>
  <div>Item 2</div>
</GridLayout>

Sets additional CSS classes to the GridLayout (see example).

Example:

<GridLayout className="custom-class" />

Specifies the default number of columns and their widths (see example).

Example:

<GridLayout cols={[{ width: '100px' }, { width: '200px' }]} />

Specifies the gaps between the elements (see example).

• The possible keys are:
• rows
• columns

Example:

<GridLayout gap={{ rows: '10px', columns: '20px' }} />

Sets the id property of the root GridLayout element (see example).

Example:

<GridLayout id="grid-layout" />

Specifies the default number of rows and their height (see example).

Example:

<GridLayout rows={[{ height: '50px' }, { height: '100px' }]} />

Sets additional CSS styles to the GridLayout (see example).

Example:

<GridLayout style={{ gap: '10px' }} />