Blazorise Grid Utilities

A simple way to build responsive columns with Flex grid system.

Blazorise comes with a 12 point grid system built using flexbox. The grid is used to create specific layouts within an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl.

How it works

Use Row and Column with ColumnSize to define widths at each breakpoint, or use RowColumns for quick equal-width layouts. The grid utilities map to your CSS provider so layouts stay consistent without custom CSS.

Examples

Rows & Columns

As the grid can be divided into 12 columns, there are size classes for each division. These can be set using ColumnSize followed by .Is1 -> .Is12. This makes responsive layouts predictable without hand-tuning widths in CSS. The final row uses RowColumns to create equal-width columns quickly. 
<Row>
    <Column ColumnSize="ColumnSize.Is12">
        <Alert Color="Color.Primary" Visible>
            Is12
        </Alert>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is8">
        <Alert Color="Color.Primary" Visible>
            Is8
        </Alert>
    </Column>
    <Column ColumnSize="ColumnSize.Is4">
        <Alert Color="Color.Secondary" Visible>
            Is4
        </Alert>
    </Column>
</Row>
<Row RowColumns="RowColumns.Are3" Margin="Margin.Is3.FromTop">
    <Column>
        <Alert Color="Color.Success" Visible>
            Auto 1
        </Alert>
    </Column>
    <Column>
        <Alert Color="Color.Info" Visible>
            Auto 2
        </Alert>
    </Column>
    <Column>
        <Alert Color="Color.Warning" Visible>
            Auto 3
        </Alert>
    </Column>
</Row>

Offset

Move columns to the right using .WithOffset attribute. Offsets are useful for creating intentional whitespace or aligning content with surrounding elements. 
<Row>
        <Column ColumnSize="ColumnSize.Is4">
        <Alert Color="Color.Primary" Visible>
            Is4
        </Alert>
        </Column>
        <Column ColumnSize="ColumnSize.Is4.Is4.WithOffset">
        <Alert Color="Color.Primary" Visible>
            Is4.Is4.WithOffset
        </Alert>
        </Column>
</Row>
<Row>
        <Column ColumnSize="ColumnSize.Is3.Is3.WithOffset">
        <Alert Color="Color.Primary" Visible>
            Is3.Is3.WithOffset
        </Alert>
        </Column>
        <Column ColumnSize="ColumnSize.Is3.Is3.WithOffset">
        <Alert Color="Color.Primary" Visible>
            Is3.Is3.WithOffset
        </Alert>
        </Column>
</Row>
<Row>
        <Column ColumnSize="ColumnSize.Is6.Is3.WithOffset">
        <Alert Color="Color.Primary" Visible>
            Is6.Is3.WithOffset
        </Alert>
        </Column>
</Row>

Gutter

Gutter can be used to set small spacing between Columns within a Row, without breaking the Grid wrapping rules (this is done by offsetting margins).

You can use it by setting the Gutter attribute on the Row. The Columns will automatically inherit this spacing and apply it.

You can set horizontal and vertical spacing independently by using .OnX and .OnY modifiers. 

<Row Gutter="Gutter.Is5.OnX.Is3.OnY">
    <Column ColumnSize="ColumnSize.Is8">
        <Alert Color="Color.Primary" Visible>
            I have padding
        </Alert>
    </Column>
    <Column ColumnSize="ColumnSize.Is4">
        <Alert Color="Color.Secondary" Visible>
            I also have padding
        </Alert>
    </Column>
</Row>

Containers

Containers can be used as an easy and helpful way to display content with some default padding and margins for a clean UI.

Container

This container will be centered on desktop. 
<Container>
        <Alert Color="Color.Primary" Visible>
        Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.
        </Alert>
</Container>

Fluid Container

If you don't want to have a maximum width but want to keep the some margin on the left and right sides, add the Fluid modifier: 
<Container Fluid>
        <Alert Color="Color.Primary" Visible>
        Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.
        </Alert>
</Container>

Responsive

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, Breakpoint.Tablet is 100% wide to start until the Tablet breakpoint is reached, where it will scale up with Desktop, Widescreen, and FullHD. 
<Container Breakpoint="Breakpoint.Tablet">
        <Alert Color="Color.Primary" Visible>
        100% wide until tablet breakpoint
        </Alert>
</Container>
<Container Breakpoint="Breakpoint.Desktop">
        <Alert Color="Color.Primary" Visible>
        100% wide until desktop breakpoint
        </Alert>
</Container>
<Container Breakpoint="Breakpoint.Widescreen">
        <Alert Color="Color.Primary" Visible>
        100% wide until widescreen breakpoint
        </Alert>
</Container>
<Container Breakpoint="Breakpoint.FullHD">
        <Alert Color="Color.Primary" Visible>
        100% wide until full-hd breakpoint
        </Alert>
</Container>

API

Attributes

Row

Name Description TypeDefault
Gutter Row grid spacing - we recommend setting Horizontal and/or Vertical it to (16 + 8n). (n stands for natural number.) (int, int)null

Column

Name Description TypeDefault
Gutter Column grid spacing, we recommend setting it to (16 + 8n). (n stands for natural number.) (int, int)null

Container

Name Description TypeDefault
Breakpoint Makes a full width container that is 100% wide until the specified breakpoint is reached. BreakpointNone
Fluid Makes a full width container, spanning the entire width of the viewport. boolfalse
On this page