[DefaultValue(DeviceSize.Large)]
[Parameter]
public DeviceSize DeviceSize { get; set; }

<DxLayoutBreakpoint DeviceSize="DeviceSize.XSmall" @bind-IsActive="@isXSmallScreen" />

<DxGridLayout CssClass="h-100" ColumnSpacing="8px" RowSpacing="8px">
    <Rows>
        @if(isXSmallScreen) {
            <DxGridLayoutRow Areas="item1" />
            <DxGridLayoutRow Areas="item2" />
            <DxGridLayoutRow Areas="item3" />
            <DxGridLayoutRow Areas="item4" />
            <DxGridLayoutRow Areas="item5" />
            <DxGridLayoutRow Areas="item6" />
        } else {
            <DxGridLayoutRow Areas="item1 item3 item5" />
            <DxGridLayoutRow Areas="item1 item4 item5"/>
            <DxGridLayoutRow Areas="item2 item6 item6"/>
        }
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr" />
        @if(!isXSmallScreen) {
            <DxGridLayoutColumn />
            <DxGridLayoutColumn />
        }
    </Columns>
    <Items>
        <DxGridLayoutItem Area="item1">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Item 1
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item2">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Item 2
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item3">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Item 3
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item4">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Item 4
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item5">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Item 5
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="item6">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Item 6
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

@code {
    bool isXSmallScreen;
}

.gridlayout-item {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    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;
    }
}