Grid

Columns by breakpoint, by minimum width, or by template.

IzzyBlazor.Grid in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (8)

ColumnsResponsive<int>Responsive

The number of equal columns (1 to 12), per breakpoint.

TemplateResponsive<string>Responsive

Column sizes as CSS grid-template-columns, per breakpoint: "240px 1fr" for a fixed side column, "2fr 1fr", "auto 1fr auto". Wins over Columns.

MinChildWidthLength?

The smallest a column may be; the grid fits as many as there is room for. Used when neither Template nor Columns is set.

Stretchbool = false

With MinChildWidth: when there are fewer items than fit in a row, stretch them to fill it. By default they keep their size and the rest of the row stays empty, so every item is the same width.

GapResponsive<int>Responsive

Space between cells, in spacing steps (0 to 16).

AlignResponsive<Align> (computed)Responsive

How items line up in their cells, block direction. Defaults to stretch.

Asstring = "div"From Box

The element to render: div on a Box; components built on it set their own (List a ul, Section a section).

ChildContentRenderFragment?From Box

The content.

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

Show them here

Events (0)

No events.

Parts (1)

Components written inside Grid, documented here with it.

`GridItem`

A cell of a Grid that spans several rows, or columns. Any component takes ColSpan; GridItem adds RowSpan.

RowSpanResponsive<int>Responsive

How many rows it spans, per breakpoint.

Asstring = "div"From Box

The element to render: div on a Box; components built on it set their own (List a ul, Section a section).

ChildContentRenderFragment?From Box

The content.

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

Types (2)

`Align`

enum

Cross-axis alignment of a Stack's children.

Align values
Value	Description
`Stretch`	Children stretch to fill the cross axis.
`Start`	Aligned to the start.
`Center`	Centered.
`End`	Aligned to the end.
`Baseline`	Aligned on their text baselines.

`Length`

struct

A width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as Rem.

Length members
Member	Description
`Sm`	640px (matches the `sm` breakpoint).
`Md`	768px (matches the `md` breakpoint).
`Lg`	1024px (matches the `lg` breakpoint).
`Xl`	1280px (matches the `xl` breakpoint).
`Prose`	A comfortable reading width, 68 characters.
`Full`	100% of the containing block.
`Auto`	`auto`.
`FitContent`	`fit-content`: as wide as the content, up to the available space.
`MinContent`	`min-content`.
`MaxContent`	`max-content`.
`Px(double value)`	Pixels.
`Rem(double value)`	Root ems (16px each by default).
`Percent(double value)`	Percent of the containing block.
`Ch(double value)`	Character widths, for text measures.
`Vw(double value)`	Percent of the viewport width.
`Dvh(double value)`	Percent of the dynamic viewport height (accounts for mobile browser bars).
`Of(string css)`	Any CSS length, such as `calc(100% - 2rem)`. Checked for unsafe characters.
`Css string`	The CSS value this length renders as.