DxGridLayout Class

A Grid Layout component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxGridLayout :
    DxControlComponent<DxGridLayout, GridLayoutJSInteropProxy>,
    IGridLayoutJSInteropProxyServer,
    IJSCallback,
    IModelWrapper<IGridLayoutModel>

Remarks

<DxGridLayout> allows you to arrange UI elements on a page. The component is based on a CSS Grid Layout: layout items are organized into rows and columns.

Grid Layout

Run Demo: Grid Layout - Overview

Add Grid Layout to a Project

Follow the steps below to add the <DxGridLayout> component to an application.

  1. Create an application. If you use Microsoft project templates, configure the application as described in this topic: Microsoft Templates.
  2. Add the <DxGridLayout>...</DxGridLayout> markup to your application.
  3. Create rows and columns.
  4. Arrange layout items.

Rows and Columns

<DxGridLayout> defines rows and columns and then positions layout items within cells. A single item can span multiple rows or columns.

Follow the steps below to create rows and columns:

  1. Add <Rows>...</Rows> and <Columns>...</Columns> to the component's markup to define the Rows and Columns collections.
  2. Add DxGridLayoutRow objects to the Rows collection. Use the Height property to specify the row height (auto, pixel, percentage, fr, etc.).
  3. Add DxGridLayoutColumn objects to the Columns collection. Use the Width property to specify the column width (auto, pixel, percentage, fr, etc.).

Elements whose size is specified with the fr unit are arranged last, since they occupy the remaining space (this space is divided between these elements in proportion to the prefix number).

<DxGridLayout>
    <Rows>
        <DxGridLayoutRow Height="100px" /> @* the row's height equals 100 pixels *@
        <DxGridLayoutRow /> @* the row occupies the remaining space after two other rows are arranged *@
        <DxGridLayoutRow Height="auto"/> @* the row's height fits a content object. *@
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr"/> @* the column occupies 2 parts of the remaining space 
                                             after the column with a percentage value is arranged*@
        <DxGridLayoutColumn Width="60%" /> @* the column occupies 60% of the grid layout's width*@
        <DxGridLayoutColumn /> @* the Width property's default value is 1fr, 
                                  the column occupies 1 part of the remaining space 
                                  after the row with percentage value is arranged *@
    </Columns>
</DxGridLayout>

If you need to organize layout items in a one-dimensional stack, you can use the DxStackLayout component.

Items

Follow the steps below to create layout items:

  1. Add <Items>...</Items> to the component's markup to define the Items collection.
  2. Add DxGridLayoutItem objects to the collection.
  3. Use the Row, Column, RowSpan, and ColumnSpan item properties to arrange items.
  4. Use the Template property to specify item content.
<DxGridLayout>
    @*define rows and columns
    ...*@
    <Items>
        <DxGridLayoutItem Row="0" Column="0" ColumnSpan="3">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Header
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="1">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Content
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="0">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Left Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="2">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Right Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="2" Column="0" ColumnSpan="3">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Footer
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

Grid Layout

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 the layout.
  • Adds a DxLayoutBreakpoint component, binds it to the IsXSmallScreen field, and specifies the device size when the breakpoint should be activated.
<DxLayoutBreakpoint DeviceSize="DeviceSize.XSmall" @bind-IsActive="@IsXSmallScreen" />

<DxGridLayout CssClass="h-100" ColumnSpacing="8px" RowSpacing="8px">
    <Rows>
        <DxGridLayoutRow />
        <DxGridLayoutRow />
        <DxGridLayoutRow />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
        <DxGridLayoutRow Visible="IsXSmallScreen" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
        <DxGridLayoutColumn Visible="!IsXSmallScreen" />
    </Columns>
    <Items>
        <DxGridLayoutItem Row="0" Column="0" ColumnSpan="2" RowSpan="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-header gridlayout-item">
                    Item 1
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 1 : 2" Column="0" ColumnSpan="2">
            <Template>
                <div class="center gridlayout-content gridlayout-item">
                    Item 2
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 2 : 0" Column="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-left-side-bar gridlayout-item">
                    Item 3
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 3 : 1" Column="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-right-side-bar gridlayout-item">
                    Item 4
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 4 : 0" Column="IsXSmallScreen ? 0 : 3" RowSpan="IsXSmallScreen ? 0 : 2">
            <Template>
                <div class="center gridlayout-footer gridlayout-item">
                    Item 5
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="IsXSmallScreen ? 5 : 2" Column="IsXSmallScreen ? 0 : 2" ColumnSpan="2">
            <Template>
                <div class="center gridlayout-left-side-bar gridlayout-item">
                    Item 6
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

@code {
    bool IsXSmallScreen { get; set; }
}

Adaptive Grid Layout

Run Demo: Grid Layout - Adaptivity

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.GridLayoutJSInteropProxy>
DxControlComponent<DxGridLayout, DevExpress.Blazor.Internal.JSInterop.GridLayoutJSInteropProxy>
DxGridLayout
See Also