Skip to main content

DxGridLayoutRow.Areas Property

Specifies areas that should be placed in the row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor


public string Areas { get; set; }

Property Value

Type Default Description
String String.Empty

The area names splitted by space character.


You can use named areas to arrange grid layout items:

  1. Create named areas. Use the 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 (.).
<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