public class DxGridLayoutColumn :
    LayoutElementBase

<DxGridLayout CssClass="h-500">
    <Rows>
        <DxGridLayoutRow Height="100px" />
        <DxGridLayoutRow />
        <DxGridLayoutRow Height="auto" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr" />
        <DxGridLayoutColumn Width="60%" />
        <DxGridLayoutColumn />
    </Columns>
    <Items>
        <DxGridLayoutItem Row="0" Column="0" ColumnSpan="3">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Header
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="1">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Content
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="0">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Left Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="2">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Right Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="2" Column="0" ColumnSpan="3">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Footer
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

.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;
}
.grid-layout {
    height: 500px;
}
@media (max-width: 575.98px) {
    .gridlayout-item {
        font-size: 0.9em;
    }
}