Grid Components - Advanced Examples

Flexible Column Sizing

Responsive columns using flex sizing with MinWidth constraints that adapt to container width.

Resize your browser window to see columns with MinWidth adapt proportionally while fixed-width columns stay constant.

View Code

<Grid Items="@orders">
    <Columns>
        <GridColumn Field="Id" Width="100px" /> 
        <GridColumn Field="Customer" MinWidth="150px" /> 
        <GridColumn Field="Status" Width="120px" /> 
        <GridColumn Field="OrderDate" MinWidth="150px" /> 
    </Columns>
</Grid>