Basic usage

Use integer Span (out of Columns, default 12) to size each item.

Span 6

Span 4

<BOBGrid Gap="1rem">
    <BOBGridItem Span="6">Span 6</BOBGridItem>
    <BOBGridItem Span="6">Span 6</BOBGridItem>
    <BOBGridItem Span="4">Span 4</BOBGridItem>
    <BOBGridItem Span="4">Span 4</BOBGridItem>
    <BOBGridItem Span="4">Span 4</BOBGridItem>
</BOBGrid>

Responsive spans

Per-breakpoint spans (Xs, Sm, Md, Lg, Xl) override Span.

xs:12 sm:6 md:4 lg:3

xs:12 sm:6 md:12 lg:3

<BOBGrid Gap="1rem">
    <BOBGridItem Xs="12" Sm="6" Md="4" Lg="3">xs:12 sm:6 md:4 lg:3</BOBGridItem>
    <BOBGridItem Xs="12" Sm="6" Md="4" Lg="3">xs:12 sm:6 md:4 lg:3</BOBGridItem>
    <BOBGridItem Xs="12" Sm="6" Md="4" Lg="3">xs:12 sm:6 md:4 lg:3</BOBGridItem>
    <BOBGridItem Xs="12" Sm="6" Md="12" Lg="3">xs:12 sm:6 md:12 lg:3</BOBGridItem>
</BOBGrid>

Auto items

Auto="true" sizes an item to its content.

Auto

Auto, wider content here

Span 4 fills rest

<BOBGrid Gap="1rem">
    <BOBGridItem Auto="true">Auto</BOBGridItem>
    <BOBGridItem Auto="true">Auto, wider content here</BOBGridItem>
    <BOBGridItem Span="4">Span 4 fills rest</BOBGridItem>
</BOBGrid>

Direction & alignment

Item A

Item B

Item C

<BOBGrid Direction="GridDirection.Column"
         AlignItems="GridAlignItems.Center"
         JustifyContent="GridJustifyContent.SpaceBetween"
         Gap="0.5rem">
    <BOBGridItem Auto="true">Item A</BOBGridItem>
    <BOBGridItem Auto="true">Item B</BOBGridItem>
    <BOBGridItem Auto="true">Item C</BOBGridItem>
</BOBGrid>

Gaps & spacing

<BOBGrid RowGap="2rem" ColumnGap="0.5rem" P="1rem" style="background: color-mix(in oklab, var(--palette-primary) 6%, transparent); border-radius: 0.5rem;">
    <BOBGridItem Span="3">3</BOBGridItem>
    <BOBGridItem Span="3">3</BOBGridItem>
    <BOBGridItem Span="3">3</BOBGridItem>
    <BOBGridItem Span="3">3</BOBGridItem>
    <BOBGridItem Span="6">6</BOBGridItem>
    <BOBGridItem Span="6">6</BOBGridItem>
</BOBGrid>

Properties

BOBGrid

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Content rendered inside the component.
`Columns`	`int?`		Columns.
`MaxWidth`	`string?`		MaxWidth.
`Gap`	`string?`		Gap.
`GapXs`	`string?`		GapXs.
`GapSm`	`string?`		GapSm.
`GapMd`	`string?`		GapMd.
`GapLg`	`string?`		GapLg.
`GapXl`	`string?`		GapXl.
`RowGap`	`string?`		RowGap.
`ColumnGap`	`string?`		ColumnGap.
`Direction`	`GridDirection`	`GridDirection.Row`	Direction.
`DirectionXs`	`GridDirection?`		DirectionXs.
`DirectionSm`	`GridDirection?`		DirectionSm.
`DirectionMd`	`GridDirection?`		DirectionMd.
`DirectionLg`	`GridDirection?`		DirectionLg.
`DirectionXl`	`GridDirection?`		DirectionXl.
`JustifyContent`	`GridJustifyContent`	`GridJustifyContent.Start`	JustifyContent.
`AlignItems`	`GridAlignItems`	`GridAlignItems.Stretch`	AlignItems.
`Wrap`	`GridWrap`	`GridWrap.Wrap`	Wrap.
`P`	`string?`		P.
`Pt`	`string?`		Pt.
`Pr`	`string?`		Pr.
`Pb`	`string?`		Pb.
`Pl`	`string?`		Pl.
`Px`	`string?`		Px.
`Py`	`string?`		Py.
`M`	`string?`		M.
`Mt`	`string?`		Mt.
`Mr`	`string?`		Mr.
`Mb`	`string?`		Mb.
`Ml`	`string?`		Ml.
`Mx`	`string?`		Mx.
`My`	`string?`		My.

BOBGridItem

Property	Type	Description
`ChildContent`	`RenderFragment?`	Content rendered inside the component.
`Span`	`int?`	Span.
`Xs`	`int?`	Xs.
`Sm`	`int?`	Sm.
`Md`	`int?`	Md.
`Lg`	`int?`	Lg.
`Xl`	`int?`	Xl.
`Auto`	`bool`	Auto.
`Offset`	`int?`	Offset.
`OffsetXs`	`int?`	OffsetXs.
`OffsetSm`	`int?`	OffsetSm.
`OffsetMd`	`int?`	OffsetMd.
`OffsetLg`	`int?`	OffsetLg.
`OffsetXl`	`int?`	OffsetXl.
`Order`	`int?`	Order.
`OrderXs`	`int?`	OrderXs.
`OrderSm`	`int?`	OrderSm.
`OrderMd`	`int?`	OrderMd.
`OrderLg`	`int?`	OrderLg.
`OrderXl`	`int?`	OrderXl.
`AlignSelf`	`GridAlignSelf?`	AlignSelf.
`HideXs`	`bool`	When , the Xs is hidden.
`HideSm`	`bool`	When , the Sm is hidden.
`HideMd`	`bool`	When , the Md is hidden.
`HideLg`	`bool`	When , the Lg is hidden.
`HideXl`	`bool`	When , the Xl is hidden.
`ShowXs`	`bool`	When , the Xs is shown.
`ShowSm`	`bool`	When , the Sm is shown.
`ShowMd`	`bool`	When , the Md is shown.
`ShowLg`	`bool`	When , the Lg is shown.
`ShowXl`	`bool`	When , the Xl is shown.
`P`	`string?`	P.
`Pt`	`string?`	Pt.
`Pr`	`string?`	Pr.
`Pb`	`string?`	Pb.
`Pl`	`string?`	Pl.
`Px`	`string?`	Px.
`Py`	`string?`	Py.
`M`	`string?`	M.
`Mt`	`string?`	Mt.
`Mr`	`string?`	Mr.
`Mb`	`string?`	Mb.
`Ml`	`string?`	Ml.
`Mx`	`string?`	Mx.
`My`	`string?`	My.