Overview

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.

  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. Use the Row, Column, RowSpan, ColumnSpan item properties to arrange items. The Template property allows you to specify item content.
Header
Content
Left Bar
Right Bar

Adaptivity

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 and uses the isXSmallScreen field to adapt its layout.
  • Adds a DxLayoutBreakpoint component, binds it to the isXSmallScreen field, and specifies the device size when the breakpoint should be activated.