Items

The GridLayout enables you to control the position of its items. This component provides a grid-based positioning system where you can place elements at specific coordinates and define their span across rows and columns. Using the configuration properties below, you can implement common layout patterns such as dashboards, admin interfaces, and content displays without writing complex CSS positioning code.

You can set up your item layout using these configuration properties:

• col—Sets the column line where your GridLayoutItem starts.
• row—Sets the row line where your GridLayoutItem starts.
• colSpan—Sets how many columns your GridLayoutItem covers.
• rowSpan—Sets how many rows your GridLayoutItem covers.

The following demo shows how to create a colorful dashboard-like layout by positioning boxes of different sizes and colors using the col, row, colSpan, and rowSpan properties.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the GridLayout
• API Reference of the GridLayoutProps
• API Reference of the GridLayoutItem
• API Reference of the GridLayoutItemProps