Blazorise Sizing Utilities

Use the Width and Height builders to apply sizing with either utility classes or inline styles.

Sizing utilities give you one consistent API for width and height across providers, making it easy to keep layouts responsive without switching between CSS and component parameters.

How it works

Sizing utilities support quick predefined sizes for responsive layouts and style-based sizes for precise values, including viewport units, CSS variables, and min/max constraints. Use Width and Height builders when you want sizing to remain explicit and reusable across components.

Examples

Predefined sizes

Use the built-in size helpers like Width.Is25, Width.Is50, Width.Is100, and Width.Auto to emit utility classes. You can chain breakpoints with OnMobile, OnTablet, and OnDesktop to make sizing responsive. This keeps common sizing consistent and avoids custom CSS in layouts. The example includes an extra responsive width to highlight breakpoint chaining.

Width.Is25
Width.Is50
Width.Is75.OnMobile.Is33.OnDesktop
Width.Is100.OnMobile.Is50.OnDesktop 
<Div Width="Width.Px().Max( 520 )" Background="Background.Light" Border="Border.Is1.Secondary.Subtle" Padding="Padding.Is3">
    <Div Width="Width.Is25"
         Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom"
         Background="Background.Primary.Subtle"
         Border="Border.Is1.Primary"
         TextColor="TextColor.Primary.Emphasis">
        Width.Is25
    </Div>
    <Div Width="Width.Is50"
         Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom"
         Background="Background.Success.Subtle"
         Border="Border.Is1.Success"
         TextColor="TextColor.Success.Emphasis">
        Width.Is50
    </Div>
    <Div Width="Width.Is75.OnMobile.Is33.OnDesktop"
         Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom"
         Background="Background.Warning.Subtle"
         Border="Border.Is1.Warning"
         TextColor="TextColor.Warning.Emphasis">
        Width.Is75.OnMobile.Is33.OnDesktop
    </Div>
    <Div Width="Width.Is100.OnMobile.Is50.OnDesktop"
         Padding="Padding.Is2"
         Background="Background.Info.Subtle"
         Border="Border.Is1.Info"
         TextColor="TextColor.Info.Emphasis">
        Width.Is100.OnMobile.Is50.OnDesktop
    </Div>
</Div>

Style-based sizes

For explicit values, use unit helpers like Px, Rem, Em, and Ch. Width also supports Vw, while height supports Vh. Chain Min and Max to define min/max sizing with the same unit. This is ideal when you need precise control for cards, sidebars, or media containers.

Width.Px(260).Min(180).Max(360)
Height.Rem(6).Min(4).Max(8)
Width.Vw(35).Min(25).Max(55)
Height.Vh(20).Min(12).Max(30) 
<Div Width="Width.Px().Max( 520 )" Background="Background.Light" Border="Border.Is1.Secondary.Subtle" Padding="Padding.Is3">
    <Div Width="Width.Px( 260 ).Min( 180 ).Max( 360 )"
         Height="Height.Rem(6).Min(4).Max(8)"
         Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom"
         Background="Background.Secondary.Subtle"
         Border="Border.Is1.Secondary"
         TextColor="TextColor.Secondary.Emphasis">
        Width.Px(260).Min(180).Max(360)
        <br />
        Height.Rem(6).Min(4).Max(8)
    </Div>
    <Div Width="Width.Vw( 35 ).Min( 25 ).Max( 55 )"
         Height="Height.Vh(20).Min(12).Max(30)"
         Padding="Padding.Is2"
         Background="Background.Warning.Subtle"
         Border="Border.Is1.Warning"
         TextColor="TextColor.Warning.Emphasis">
        Width.Vw(35).Min(25).Max(55)
        <br />
        Height.Vh(20).Min(12).Max(30)
    </Div>
</Div>

CSS variables

Use Var to size elements from a CSS variable, and use unit-only helpers like Px(), Rem(), Em(), Ch(), Vw(), and Vh() when you want to define only Min or Max without a base size. This keeps sizing tied to your theme tokens while still allowing responsive constraints.

Width.Var("--tile-width") / Height.Var("--tile-height")
Width.Px().Min(180).Max(320)
Height.Vh().Max(25) 
<Div Style="--tile-width: 16rem; --tile-height: 8rem;" Width="Width.Px().Max( 520 )" Background="Background.Light" Border="Border.Is1.Secondary.Subtle" Padding="Padding.Is3">
    <Div Width="@Width.Var( TileWidthVariable )"
         Height="@Height.Var( TileHeightVariable )"
         Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom"
         Background="Background.Success.Subtle"
         Border="Border.Is1.Success"
         TextColor="TextColor.Success.Emphasis">
        Width.Var("--tile-width") / Height.Var("--tile-height")
    </Div>
    <Div Width="Width.Px().Min( 180 ).Max( 320 )"
         Height="Height.Vh().Max(25)"
         Padding="Padding.Is2"
         Background="Background.Danger.Subtle"
         Border="Border.Is1.Danger"
         TextColor="TextColor.Danger.Emphasis">
        Width.Px().Min(180).Max(320)
        <br />
        Height.Vh().Max(25)
    </Div>
</Div>

@code {
    private const string TileWidthVariable = "--tile-width";
    private const string TileHeightVariable = "--tile-height";
}
On this page