DxGridLayoutRow.Areas Property

Specifies areas that should be placed in the row.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue("")]
[Parameter]
public string Areas { get; set; }

Property Value

Type	Default	Description
String	String.Empty

The area names splitted by space character.

Remarks

You can use named areas to arrange grid layout items:

Create named areas. Use the Area property to assign an area name to a grid layout’s item.
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 (.).

Razor
CSS

razor

<DxGridLayout CssClass="w-100 ch-480">
    <Rows>
        <DxGridLayoutRow Areas="header header header" Height="100px" />
        <DxGridLayoutRow Areas="left-bar content right-bar" />
        <DxGridLayoutRow Areas="footer footer footer" Height="auto" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr" />
        <DxGridLayoutColumn Width="60%" />
        <DxGridLayoutColumn />
    </Columns>
    <Items>
        <DxGridLayoutItem Area="header">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Header
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="content">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Content
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="left-bar">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Left Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="right-bar">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Right Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="footer">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Footer
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

css

.gridlayout-item {
    font-size: 1.2em;
    font-weight: 500;
    height: 100%;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gridlayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.4;
}

.gridlayout-header:before {
    background-color: var(--dxds-color-surface-utility-red-default-rest);
}

.gridlayout-content:before {
    background-color: var(--dxds-color-surface-utility-yellow-default-rest);
}

.gridlayout-left-side-bar:before {
    background-color: var(--dxds-color-surface-utility-green-default-rest);
}

.gridlayout-right-side-bar:before {
    background-color: var(--dxds-color-surface-utility-purple-default-rest);
}

.gridlayout-footer:before {
    background-color: var(--dxds-color-surface-utility-blue-default-rest);
    opacity: 0.5;
}
@media (max-width: 575.98px) {
    .gridlayout-item {
        font-size: 0.9em;
    }
}

Run Demo: Grid Layout - Areas