Skip to main content

DxGridLayoutItem.Area Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor


public string Area { get; set; }

Property Value

Type Default Description
String null

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