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. Style-based values can use explicit builders such as Width.Rem( 8 ) or numeric shorthands such as 8.Rem().

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>

Numeric shorthands

Call Px, Rem, Em, Ch, Vw, Vh, or Percent directly on a numeric value. The component parameter determines whether the value is used for width, height, gap, or text size, so the same concise syntax works with each utility. Width and height values can chain Min and Max. For CSS expressions, use Width.Calc or Height.Calc. The explicit forms, including Width.Rem( 8 ), Gap.Rem( 1 ), and TextSize.Rem( 1.25 ), remain available.

Width="8.Rem()", Height="4.Rem()", and TextSize="1.25.Rem()"

Width="50.Percent()"

Width="20.Rem().Min( 12 ).Max( 30 )"

Width="Width.Calc( "100% - 2rem" )"

<Div Width="Width.Px().Max( 520 )" Flex="Flex.Column" Gap="1.Rem()">
    <Div Width="8.Rem()"
         Height="4.Rem()"
         TextSize="1.25.Rem()"
         Padding="Padding.Is2"
         Background="Background.Primary.Subtle"
         Border="Border.Is1.Primary"
         TextColor="TextColor.Primary.Emphasis">
        Width="8.Rem()", Height="4.Rem()", and TextSize="1.25.Rem()"
    </Div>
    <Div Width="50.Percent()"
         Padding="Padding.Is2"
         Background="Background.Success.Subtle"
         Border="Border.Is1.Success"
         TextColor="TextColor.Success.Emphasis">
        Width="50.Percent()"
    </Div>
    <Div Width="20.Rem().Min( 12 ).Max( 30 )"
         Padding="Padding.Is2"
         Background="Background.Warning.Subtle"
         Border="Border.Is1.Warning"
         TextColor="TextColor.Warning.Emphasis">
        Width="20.Rem().Min( 12 ).Max( 30 )"
    </Div>
    <Div Width="@(Width.Calc( "100% - 2rem" ))"
         Padding="Padding.Is2"
         Background="Background.Secondary.Subtle"
         Border="Border.Is1.Secondary"
         TextColor="TextColor.Secondary.Emphasis">
        Width="Width.Calc( "100% - 2rem" )"
    </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";
}