sufi-blazor/docs/components/layout/SbGridItem.md

SbGridItem

A child component of SbGrid that spans a specified number of columns with responsive breakpoint support.

Parameters

Parameter	Type	Default	Description
Span	int	1	Number of columns this item spans (1-12)
SpanSm	int?	null	Column span at small breakpoint (640px+)
SpanMd	int?	null	Column span at medium breakpoint (768px+)
SpanLg	int?	null	Column span at large breakpoint (1024px+)
SpanXl	int?	null	Column span at extra large breakpoint (1280px+)
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment	Content to render inside the grid item

CSS Classes

• sb-grid-item - Base class
• sb-grid-item--sm-{n} - Small breakpoint span
• sb-grid-item--md-{n} - Medium breakpoint span
• sb-grid-item--lg-{n} - Large breakpoint span
• sb-grid-item--xl-{n} - Extra large breakpoint span

CSS Variables

• --sb-grid-span - Number of columns to span

Examples

Basic Usage

<SbGrid Columns="12">
    <SbGridItem Span="6">Half width</SbGridItem>
    <SbGridItem Span="6">Half width</SbGridItem>
</SbGrid>

Responsive Span

<SbGrid Columns="12">
    <SbGridItem Span="12" SpanMd="6" SpanLg="4">
        <SbCard>Responsive Card</SbCard>
    </SbGridItem>
</SbGrid>

Full Width Header

<SbGrid Columns="12" Gap="4">
    <SbGridItem Span="12">
        <h1>Page Title</h1>
    </SbGridItem>
    <SbGridItem Span="8">
        <SbCard>Main Content</SbCard>
    </SbGridItem>
    <SbGridItem Span="4">
        <SbCard>Sidebar</SbCard>
    </SbGridItem>
</SbGrid>

Mixed Column Widths

<SbGrid Columns="12" Gap="4">
    <SbGridItem Span="4">
        <SbCard>1/3 width</SbCard>
    </SbGridItem>
    <SbGridItem Span="8">
        <SbCard>2/3 width</SbCard>
    </SbGridItem>
    <SbGridItem Span="3">
        <SbCard>1/4 width</SbCard>
    </SbGridItem>
    <SbGridItem Span="3">
        <SbCard>1/4 width</SbCard>
    </SbGridItem>
    <SbGridItem Span="6">
        <SbCard>1/2 width</SbCard>
    </SbGridItem>
</SbGrid>

Responsive Dashboard

<SbGrid Columns="12" Gap="4">
    @* Stats row - 4 columns on large, 2 on medium, 1 on small *@
    <SbGridItem Span="12" SpanMd="6" SpanLg="3">
        <SbStatCard Value="1,234" Label="Users" />
    </SbGridItem>
    <SbGridItem Span="12" SpanMd="6" SpanLg="3">
        <SbStatCard Value="$56K" Label="Revenue" />
    </SbGridItem>
    <SbGridItem Span="12" SpanMd="6" SpanLg="3">
        <SbStatCard Value="89%" Label="Uptime" />
    </SbGridItem>
    <SbGridItem Span="12" SpanMd="6" SpanLg="3">
        <SbStatCard Value="42" Label="Orders" />
    </SbGridItem>
    
    @* Chart - full width on small, 2/3 on large *@
    <SbGridItem Span="12" SpanLg="8">
        <SbCard>Chart Area</SbCard>
    </SbGridItem>
    
    @* Activity feed - full width on small, 1/3 on large *@
    <SbGridItem Span="12" SpanLg="4">
        <SbCard>Activity Feed</SbCard>
    </SbGridItem>
</SbGrid>