Blazorise Column Size Utilities

Define responsive column widths with the ColumnSize fluent builder for Blazorise grid columns.

Column size utilities let you set column widths per breakpoint without writing CSS. They are ideal for responsive layouts that must stay aligned with the grid system and design tokens.

How it works

Apply ColumnSize to a Column and chain sizes like Is1 through Is12, plus shortcuts like IsHalf, IsThird, and IsAuto. Add breakpoints (OnMobile, OnTablet, OnDesktop) to change widths responsively. Pair with WithOffset when you need intentional whitespace or alignment shifts. For the full grid system, see the Grid utilities page.

Examples

Responsive column widths

The column sizes change by breakpoint so the content stacks on mobile, balances on tablet, and splits on desktop. This keeps content readable without maintaining separate layouts. The second row uses the IsThird shortcut to create equal columns without counting grid units.

The final row pairs an IsAuto column with a fixed-width companion that wraps on mobile, showing how content-sized columns work in the grid.

Profile

This column adjusts automatically based on screen size.

  • Desktop: 4 columns
  • Tablet: 6 columns
  • Mobile: full width (12 columns)
Details

Combine multiple breakpoint sizes with a fluent builder pattern. This allows you to create flexible, responsive layouts without manually writing CSS grid rules.

One third
One third
One third
Auto width
Fixed column that wraps on mobile 
<Row>
    <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Profile</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    This column adjusts automatically based on screen size.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>Desktop: 4 columns</UnorderedListItem>
                    <UnorderedListItem>Tablet: 6 columns</UnorderedListItem>
                    <UnorderedListItem>Mobile: full width (12 columns)</UnorderedListItem>
                </UnorderedList>
            </CardBody>
        </Card>
    </Column>

    <Column ColumnSize="ColumnSize.Is8.OnDesktop.Is6.OnTablet.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Details</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    Combine multiple breakpoint sizes with a fluent builder pattern.
                    This allows you to create flexible, responsive layouts
                    without manually writing CSS grid rules.
                </Paragraph>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row Margin="Margin.Is3.FromTop">
    <Column ColumnSize="ColumnSize.IsThird">
        <Card>
            <CardBody>
                One third
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird">
        <Card>
            <CardBody>
                One third
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird">
        <Card>
            <CardBody>
                One third
            </CardBody>
        </Card>
    </Column>
</Row>

<Row Margin="Margin.Is3.FromTop">
    <Column ColumnSize="ColumnSize.IsAuto">
        <Card>
            <CardBody>
                Auto width
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card>
            <CardBody>
                Fixed column that wraps on mobile
            </CardBody>
        </Card>
    </Column>
</Row>
On this page