Blazorise CSS Grid Utilities

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid utilities.

How it works

With Blazorise, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Blazorise twist. Use the Grid component with GridColumns and GridRows helpers to define layout directly in C# while staying aligned with your provider.

CSS Grid utilities are ideal for two-dimensional layouts where you want precise control over both rows and columns without custom CSS.

Examples

Three columns

Three equal-width columns across all viewports and devices can be created by using the GridColumns.Are3 utilities. This is a quick way to establish a balanced card or feature layout.

Col 4

<Grid Columns="GridColumns.Are3">
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        Col 4
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        Col 4
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        Col 4
        </Alert>
</Grid>

Wrapping

Grid items automatically wrap to the next line when there's no more room horizontally. Note that the gap applies to horizontal and vertical gaps between grid items. This helps you keep consistent spacing as cards reflow on smaller screens.

Col 6

<Grid>
        <Column ColumnSize="ColumnSize.Is6">
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
            Col 6
        </Alert>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
            Col 6
        </Alert>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
            Col 6
        </Alert>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
            Col 6
        </Alert>
        </Column>
</Grid>

Auto columns

When there are no classes on the grid items (the immediate children of a Grid), each grid item will automatically be sized to one column. This is useful when you want a simple, evenly spaced layout without defining sizes on each item.

<Grid>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
        <Alert Color="Color.Primary" Visible Margin="Margin.Is0">
        1
        </Alert>
</Grid>

Mixing auto and fixed columns

Combine auto-sized items with explicit column classes to keep key content aligned while letting supporting items flow naturally. The second grid uses a smaller fixed span to keep a compact item aligned while the rest stay auto-sized.