Blazorise Gutters Utilities

Use the gutters utilities to control the horizontal and vertical spacing between columns and rows in your layouts.

Gutters give you consistent, theme-aware spacing between grid columns without manual margin or padding math.

Gutters are applied to row-like containers and automatically affect their direct children.

How it works

Gutters in Blazorise are configured through the Gutter parameter on row-like components, usually the <Row>. They are expressed using Gutter.Is* utilities and optional axis helpers like .OnX and .OnY. Internally, these are mapped to the underlying CSS framework (Bootstrap, Tailwind, Bulma, etc.) and translated into the proper combination of margins and paddings to emulate Bootstrap 5–style gutters.

A gutter has a size and an optional side. When no side is specified, gutters apply on both axes (horizontal and vertical). Use OnX to control only the horizontal spacing between columns and OnY to control only the vertical spacing when columns wrap onto new lines.

For example, in Tailwind, horizontal gutters are implemented using negative margins on the container and half-gutter padding on the children, while vertical gutters use a full gutter size on the top margin of the children with a matching negative margin on the container. This mirrors the Bootstrap 5 approach where the container uses half and full gutter values and the child elements use half-gutter padding on the left and right.

Examples

Horizontal gutters

Use Gutter.Is* with OnX utilities to control the horizontal gutter width between columns. This affects only the spacing on the X axis, leaving the vertical spacing unchanged.

In this example we add horizontal padding to the container so that the negative margins introduced by the gutters do not visually overflow outside of the container.

Custom column padding
Custom column padding 
<Container Padding="Padding.Is4.OnX" TextAlignment="TextAlignment.Center">
    <Row Gutter="Gutter.Is5.OnX">
        @for ( int i = 1; i <= 2; i++ )
        {
            <Column>
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Primary">
                    Custom column padding
                </Div>
            </Column>
        }
    </Row>
</Container>

Horizontal gutters with overflow

When using larger horizontal gutters, the negative margins can extend the row outside of its container. One option to handle this is to wrap the row in a container with Overflow.Hidden so that any overflow is clipped.

This approach is useful when you want strong horizontal separation between columns but still keep the layout visually aligned with the rest of the page.

Custom column padding
Custom column padding 
<Container Overflow="Overflow.Hidden" TextAlignment="TextAlignment.Center">
    <Row Gutter="Gutter.Is5.OnX">
        @for ( int i = 1; i <= 2; i++ )
        {
            <Column>
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Primary">
                    Custom column padding
                </Div>
            </Column>
        }
    </Row>
</Container>

Vertical gutters

Use Gutter.Is* with OnY utilities to control the vertical gutter width between wrapped columns. Vertical gutters are especially useful when your columns span multiple rows and you want consistent spacing between them.

In the following example, the columns wrap onto multiple lines, and the vertical gutter is applied so each row of columns is separated by the specified gutter size.

Custom column padding
Custom column padding
Custom column padding
Custom column padding 
<Container Overflow="Overflow.Hidden" TextAlignment="TextAlignment.Center">
    <Row Gutter="Gutter.Is5.OnY">
        @for ( int i = 1; i <= 4; i++ )
        {
            <Column ColumnSize="ColumnSize.Is6">
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Primary">
                    Custom column padding
                </Div>
            </Column>
        }
    </Row>
</Container>

Horizontal & vertical gutters

When you omit the axis helper, Gutter.Is* applies gutters on both the horizontal and vertical axes. This controls the spacing between columns and rows at the same time.

In this example we use a smaller gutter size, which keeps the layout compact enough that there is no need for an additional overflow wrapper. The second row shows how to assign different sizes to horizontal and vertical gutters. This is often a good default for simple grid layouts.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
Horizontal and vertical gutters
Horizontal and vertical gutters
Horizontal and vertical gutters
Horizontal and vertical gutters 
<Container TextAlignment="TextAlignment.Center">
    <Row Gutter="Gutter.Is2">
        @for ( int i = 1; i <= 4; i++ )
        {
            <Column ColumnSize="ColumnSize.Is6">
                <Div Padding="Padding.Is3"
                     Background="Background.Primary.Subtle"
                     Border="Border.Primary">
                    Custom column padding
                </Div>
            </Column>
        }
    </Row>

    <Row Gutter="Gutter.Is1.OnY.Is3.OnX" Margin="Margin.Is3.FromTop">
        @for ( int i = 1; i <= 4; i++ )
        {
            <Column ColumnSize="ColumnSize.Is6">
                <Div Padding="Padding.Is3"
                     Background="Background.Success.Subtle"
                     Border="Border.Success">
                    Horizontal and vertical gutters
                </Div>
            </Column>
        }
    </Row>
</Container>
On this page