Grid: Blazor grid component

Examples

Responsive spans

Each Item takes a column span per breakpoint, so cells stack on phones and sit side by side on desktops.

xs=12 md=6 lg=4

xs=12 lg=4

xs=12 md=8

xs=12 md=4

website/Examples/Layout/GridResponsiveExample.razor Source

Spacing

Spacing sets the gap between cells, on Tailwind's spacing scale.

Spacing="1"

Spacing="3"

Spacing="6"

website/Examples/Layout/GridSpacingExample.razor Source

Alignment

AlignItems aligns cells of different heights along the row.

Short

A taller cell: its neighbours are centred against it because AlignItems is Center.

Short

website/Examples/Layout/GridAlignExample.razor Source

API

<Grid>

DaisyBlazor

Parameters

AlignItems AlignItems?
= null
Vertical alignment of cells (Tailwind items-*); unset by default.
Justify Justify?
= null
Horizontal distribution of cells (Tailwind justify-*); unset by default.
Spacing int
= 6
Gap between cells as a Tailwind gap-* step; defaults to 6.
Class string
= null
Additional CSS classes merged onto the grid grid-cols-12 container.
Style string
= null
Inline styles applied to the grid container.

Name	Type	Default	Description
AlignItems	AlignItems?	null	Vertical alignment of cells (Tailwind items-*); unset by default.
Justify	Justify?	null	Horizontal distribution of cells (Tailwind justify-*); unset by default.
Spacing	int	6	Gap between cells as a Tailwind gap-* step; defaults to 6.
Class	string	null	Additional CSS classes merged onto the grid grid-cols-12 container.
Style	string	null	Inline styles applied to the grid container.

Content

ChildContent RenderFragment
Grid cells, typically Item components spanning the 12 columns.

Name	Type	Description
ChildContent	RenderFragment	Grid cells, typically Item components spanning the 12 columns.

<Item>

DaisyBlazor

Parameters

lg int
= 0
Column span (1..12) from the lg breakpoint up. 0 = unset.
md int
= 0
Column span (1..12) from the md breakpoint up. 0 = unset.
sm int
= 0
Column span (1..12) from the sm breakpoint up. 0 = unset.
xl int
= 0
Column span (1..12) from the xl breakpoint up. 0 = unset.
xs int
= 0
Base (mobile) column span (1..12). 0 = unset.
Class string
= null
Extra CSS classes added to the grid cell.
Style string
= null
Inline styles applied to the grid cell.

Name	Type	Default	Description
lg	int	0	Column span (1..12) from the lg breakpoint up. 0 = unset.
md	int	0	Column span (1..12) from the md breakpoint up. 0 = unset.
sm	int	0	Column span (1..12) from the sm breakpoint up. 0 = unset.
xl	int	0	Column span (1..12) from the xl breakpoint up. 0 = unset.
xs	int	0	Base (mobile) column span (1..12). 0 = unset.
Class	string	null	Extra CSS classes added to the grid cell.
Style	string	null	Inline styles applied to the grid cell.

Content

ChildContent RenderFragment
The cell content.

Name	Type	Description
ChildContent	RenderFragment	The cell content.

From MudGrid

Grid keeps MudGrid's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.