DxGridLayoutItem.Area Property

Specifies the name of the layout area to which the item relates.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll


public string Area { get; set; }

Property Value

Type Description

The area name.


You can use named areas to arrange grid layout items.

The Area property allows you to assign an area name to a grid layout’s item. To specify how to position areas within grid rows, use the DxGridLayoutRow.Areas property.

<DxGridLayout style="height:500px" ColumnSpacing="8px" RowSpacing="8px">
        <DxGridLayoutRow Areas="header header header" Height="100px" />
        <DxGridLayoutRow Areas="left-bar content right-bar" />
        <DxGridLayoutRow Areas="footer footer footer" Height="auto" />
        <DxGridLayoutColumn Width="2fr" />
        <DxGridLayoutColumn Width="60%"/>
        <DxGridLayoutColumn />
        <DxGridLayoutItem Area="header">
                <div class="gridlayout-header gridlayout-item">
        <DxGridLayoutItem Area="content">
                <div class="gridlayout-content gridlayout-item">
        <DxGridLayoutItem Area="left-bar">
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Left Bar
        <DxGridLayoutItem Area="right-bar">
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Right Bar
        <DxGridLayoutItem Area="footer">
                <div class="gridlayout-footer gridlayout-item">

Grid Layout

Run Demo: Grid Layout - Areas

Watch Video

See Also