Row

Lays its children out in a row, always.

An interactive page: C# runs over a Blazor Server connection.

Lays children out horizontally. For a direction that changes by screen size, use Stack.

Usage

razor

<Row Gap="2" Align="Align.Center">
    <Avatar Name="Ada Lovelace" />
    <TextBlock>Ada Lovelace</TextBlock>
    <Spacer />
    <Button Size="ControlSize.Sm">Follow</Button>
</Row>

Alignment

Use Align for where children sit across the row: Align.Center puts the avatar, the text and the button on one center line, where the default would stretch the button to the row's height.

Preview Code

Preview

Ada Lovelace

ada@example.com

Code

Alignment.razor

<Row Gap="3" Align="Align.Center" Padding="4" Border="1" Radius="Radius.Lg" Grow>
    <Avatar Name="Ada Lovelace" Size="AvatarSize.Lg" />
    <Column Grow>
        <TextBlock Weight="FontWeight.Semibold">Ada Lovelace</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">ada@example.com</TextBlock>
    </Column>
    <Button Size="ControlSize.Sm" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Message</Button>
</Row>

Spreading out

Use Justify to share the free space along the row: Justify.Between puts the count at the start and the buttons at the end.

Preview Code

Preview

Showing 1–10 of 42 invoices

Code

Distribute.razor

<Row Justify="Justify.Between" Align="Align.Center" Gap="4" Grow>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">Showing 1–10 of 42 invoices</TextBlock>
    <Row Gap="2">
        <Button Size="ControlSize.Sm" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Previous</Button>
        <Button Size="ControlSize.Sm" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Next</Button>
    </Row>
</Row>

Wrapping

Set Wrap to let children flow onto more lines when they don't fit; without it they stay on one line.

Preview Code

Preview

Design Accessibility Performance Forms Dark mode Localization Testing

Code

Wrapping.razor

<Row Gap="2" Wrap MaxWidth="24.Rem">
    <Tag>Design</Tag>
    <Tag>Accessibility</Tag>
    <Tag>Performance</Tag>
    <Tag>Forms</Tag>
    <Tag>Dark mode</Tag>
    <Tag>Localization</Tag>
    <Tag>Testing</Tag>
</Row>

Give children Grow and a Basis in a wrapping row to share the width: each stat is at least 10rem and stretches to fill its line, and one that doesn't fit wraps to the next.

Preview Code

Preview

Revenue

$48,210

Customers

1,284

Churn

2.1%

Open invoices

Code

Stats.razor

<Row Gap="3" Wrap Grow>
    <Box Grow Basis="10.Rem" Padding="4" Border="1" Radius="Radius.Lg">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Revenue</TextBlock>
        <TextBlock Size="TextSize.Xl2" Weight="FontWeight.Semibold">$48,210</TextBlock>
    </Box>
    <Box Grow Basis="10.Rem" Padding="4" Border="1" Radius="Radius.Lg">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Customers</TextBlock>
        <TextBlock Size="TextSize.Xl2" Weight="FontWeight.Semibold">1,284</TextBlock>
    </Box>
    <Box Grow Basis="10.Rem" Padding="4" Border="1" Radius="Radius.Lg">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Churn</TextBlock>
        <TextBlock Size="TextSize.Xl2" Weight="FontWeight.Semibold">2.1%</TextBlock>
    </Box>
    <Box Grow Basis="10.Rem" Padding="4" Border="1" Radius="Radius.Lg">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Open invoices</TextBlock>
        <TextBlock Size="TextSize.Xl2" Weight="FontWeight.Semibold">17</TextBlock>
    </Box>
</Row>

Mode support

What works in each mode, Row
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Parameters

Row parameters
Prop	Type	Default
`Gap`Space between children, in spacing steps (0 to 16).	`Responsive<int>`
`Align`Cross-axis alignment.	`Responsive<Align>`	`computed`
`Justify`Main-axis distribution.	`Responsive<Justify>`	`computed`
`Wrap`Whether children wrap onto new lines: <Row Wrap>.	`bool`	`false`
`Inline`Renders as inline-flex so the container sits in a line of text.	`bool`	`false`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"div"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API