BlazorUI Demo

Grid and grid item

A responsive CSS Grid layout. Column count is configurable and item spans may change at each breakpoint.

Responsive spans
12 columns on small screens, 8 on medium
12 columns on small screens, 4 on medium
View code 
<BuiGrid Columns="12" Gap="3">
    <BuiGridItem Xs="12" Md="8"><BuiSurface>12 columns on small screens, 8 on medium</BuiSurface></BuiGridItem>
    <BuiGridItem Xs="12" Md="4"><BuiSurface>12 columns on small screens, 4 on medium</BuiSurface></BuiGridItem>
</BuiGrid>
Custom column count
Item 6
Item 6
Item 6
Item 6
Item 6
View code 
<BuiGrid Columns="5" Gap="2">
    @for (var index = 1; index <= 5; index++) { <BuiGridItem Xs="1"><BuiSurface>Item @index</BuiSurface></BuiGridItem> }
</BuiGrid>