Grid
JavaScript off: what the HTML and CSS do on their own.
A CSS grid. Columns come from, in order of precedence:
Template: your own column sizes, such as240px 1fr, per breakpoint.Columns: a number of equal columns, per breakpoint.MinChildWidth: as many columns as fit, with no breakpoints.
Usage
<Grid Columns="new() { Base = 1, Sm = 2, Lg = 3 }" Gap="4">...</Grid>
<Grid MinChildWidth="16.Rem" Gap="4">...</Grid>
<Grid Template='new() { Base = "1fr", Md = "240px 1fr" }' Gap="6">...</Grid>Columns by breakpoint
Use Columns with a breakpoint map for a set number of equal columns: one on phones, two from Sm (640px), and three from Lg (1024px).
Preview
Marketing site
Updated 2 hours ago
Billing API
Updated yesterday
Mobile app
Updated 3 days ago
Design system
Updated last week
Data warehouse
Updated last week
Status page
Updated last month
Code
<Grid Columns="new() { Base = 1, Sm = 2, Lg = 3 }" Gap="4" Grow>
foreach (var project in Projects)
{
<Card Title="project.Name" Description="project.Updated" Size="ControlSize.Sm" />
}
</Grid>As many columns as fit
Use MinChildWidth to fit as many columns as there's room for, each at least that wide, with no breakpoints to pick.
Preview
Code
<Grid MinChildWidth="12.Rem" Gap="3" Grow>
foreach (var person in People)
{
<Row Gap="3" Align="Align.Center" Padding="3" Border="1" Radius="Radius.Lg">
<Avatar Name="person" Size="AvatarSize.Sm" />
<TextBlock As="span" Size="TextSize.Sm">person</TextBlock>
</Row>
}
</Grid>A short row
With MinChildWidth, a row with fewer items keeps its empty columns so every item is the same width (top); add Stretch to let them fill the row (bottom).
Preview
Web
3 environments
API
2 environments
Web
3 environments
API
2 environments
Code
<Stack Gap="4" Grow>
<Grid MinChildWidth="12.Rem" Gap="3">
<Card Title="Web" Description="3 environments" Size="ControlSize.Sm" />
<Card Title="API" Description="2 environments" Size="ControlSize.Sm" />
</Grid>
<Grid MinChildWidth="12.Rem" Stretch Gap="3">
<Card Title="Web" Description="3 environments" Size="ControlSize.Sm" />
<Card Title="API" Description="2 environments" Size="ControlSize.Sm" />
</Grid>
</Stack>Your own column sizes
Use Template for CSS column sizes per breakpoint: from Sm, a 12rem side column beside the results; on phones, one column.
Preview
Status
Open
Paid
Overdue
Invoice #1042
Analytical Engines, $384.00, due Nov 1
Invoice #1041
Difference Labs, $1,250.00, due Oct 28
Code
<Grid Template='new() { Base = "minmax(0, 1fr)", Sm = "12rem minmax(0, 1fr)" }' Gap="6" Grow>
<Column Gap="2" Padding="4" Bg="Color.FillSubtle" Radius="Radius.Lg">
<TextBlock Weight="FontWeight.Semibold">Status</TextBlock>
<TextBlock Size="TextSize.Sm">Open</TextBlock>
<TextBlock Size="TextSize.Sm">Paid</TextBlock>
<TextBlock Size="TextSize.Sm">Overdue</TextBlock>
</Column>
<Column Gap="3">
<Card Title="Invoice #1042" Description="Analytical Engines, $384.00, due Nov 1" Size="ControlSize.Sm" />
<Card Title="Invoice #1041" Description="Difference Labs, $1,250.00, due Oct 28" Size="ControlSize.Sm" />
</Column>
</Grid>Spanning cells
Set ColSpan on any child to span columns, and wrap one in a GridItem for RowSpan: from Sm the revenue card takes two columns and two rows, and the activity card spans the row with GridSpan.Full.
Preview
Revenue
Last 30 days
$48,210
Active users
1,284
Churn
2.1%
Recent activity
Ada Lovelace paid invoice #1042
Code
<Grid Columns="new() { Base = 1, Sm = 3 }" Gap="3" Grow>
<GridItem ColSpan="new() { Base = 1, Sm = 2 }" RowSpan="new() { Base = 1, Sm = 2 }">
<Card Title="Revenue" Description="Last 30 days" Height="Length.Full">
<TextBlock Size="TextSize.Xl3" Weight="FontWeight.Bold">$48,210</TextBlock>
</Card>
</GridItem>
<Card Title="Active users" Description="1,284" Size="ControlSize.Sm" />
<Card Title="Churn" Description="2.1%" Size="ControlSize.Sm" />
<Card Title="Recent activity" Description="Ada Lovelace paid invoice #1042" Size="ControlSize.Sm" ColSpan="GridSpan.Full" />
</Grid>Parts
Written inside Grid. The API page lists their parameters.
GridItem: a cell of a Grid that spans several rows, or columns.
Mode support
| 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).
Accessibility
Parameters
| Prop | Type | Default |
|---|---|---|
ColumnsThe number of equal columns (1 to 12), per breakpoint. | Responsive<int> | |
TemplateColumn sizes as CSS grid-template-columns, per breakpoint: "240px 1fr" for a fixed side column, "2fr 1fr", "auto 1fr auto". | Responsive<string> | |
MinChildWidthThe smallest a column may be; the grid fits as many as there is room for. | Length? | |
StretchWith MinChildWidth: when there are fewer items than fit in a row, stretch them to fill it. | bool | false |
GapSpace between cells, in spacing steps (0 to 16). | Responsive<int> | |
AlignHow items line up in their cells, block direction. | Responsive<Align> | computed |
AsThe element to render: div on a Box; components built on it set their own (List a ul, Section a section). | string | "div" |
ChildContentThe content. | RenderFragment? |
Plus 25 surface props, 16 item props and 4 common props.
Full API