DxGridLayoutItem.CssClass Property

Specifies the name of a CSS class applied to a layout item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
String	null	The CSS class name.

Remarks

Assign a CSS class name to the CssClass property to define the appearance of the layout item.

Razor

<DxGridLayout>
    ...
    <Items>
        <DxGridLayoutItem Row="0" Column="0" ColumnSpan="3" CssClass="gridlayout-item">
            ...
        </DxGridLayoutItem>
        <DxGridLayoutItem Row="1" Column="1" CssClass="gridlayout-item">
            ...
        </DxGridLayoutItem>
        ...
    </Items>
</DxGridLayout>

CSS

.gridlayout-item {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    height: 100%;
    padding-top: 10px;
    text-align: center;
    position: relative;
    z-index: 0;
}

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