DxGridLayoutItem.Area Property

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

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(null)]
[Parameter]
public string Area { get; set; }

Property Value

Type	Default	Description
String	null

The area name.

Remarks

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.

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