Our Blazor Grid Layout component allows you to arrange UI elements across a page. The component is based on a CSS Grid Layout: layout items are organized into rows and columns. A single item can span multiple rows or columns.

This demo demonstrates how to add a DxGridLayout component to a page and use row and column indexes to arrange layout items.

1. Add the <DxGridLayout>...</DxGridLayout> markup to your application.
2. Define both the Rows and Columns collections.
3. Add DxGridLayoutRow objects to the Rows collection. Use the Height property to specify row height (auto, pixel, percentage, fr, etc.).
4. Add DxGridLayoutColumn objects to the Columns collection. Use the Width property to specify column width (auto, pixel, percentage, fr, etc.).
5. Define the Items collection and populate it with DxGridLayoutItem objects. The Template property allows you to specify item content.
6. Use the Row and Column properties to specify the row and column where the item should be located.
7. Use the RowSpan and ColumnSpan properties to specify how many rows and columns the item occupies.

You can use named areas to arrange grid layout items:

1. Use the DxGridLayoutItem.Area property to assign an area name to a grid layout's item.
2. Use the DxGridLayoutRow.Areas property to specify how to position areas within grid rows. If you need to leave a grid cell empty, use a period character ( . ).

You can use the DxLayoutBreakpoint component to adapt a grid layout to different screen sizes.

The code below does the following:

• Creates an isXSmallScreen data field.
• Adds a DxGridLayout component, uses named areas to arrange items, and adapts the layout for different screen sizes depending on the isXSmallScreen field value.
• Adds a DxLayoutBreakpoint component. The DeviceSize property specifies the device size when the breakpoint should be activated. The IsActive property is bound to the isXSmallScreen field. When the breakpoint is activated, the IsActive property and the bound IsXSmallScreen field equal true.