# Star Sizing

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



You can use **XAML-style** star sizing to implement flexible layouts with the FlexGrid. The sample below uses Star sizing specified in the width property of the object.

This grid has three columns. The first is **80 pixels** wide and can be resized between **40** and **160 pixels**. The other two have widths of **2\*** and **\***, and cannot be resized using the mouse. The width proportions of the columns remain unchanged even on resizing the first column or the whole grid.

The following image shows how the FlexGrid appears on applying star sizing on the columns using the **Width** property. The example uses Sale.cs model added in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart) section.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridstarsizing1.png)

The following code examples demonstrate how to apply star sizing to the columns of the FlexGrid:

#### In Code

**StarSizingController.cs**

```csharp
public ActionResult StarSizing()
{
    return View(Sales.GetData(10));
}
```

**StarSizing.cshtml**

```razor
@using MVCFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@(Html.C1().FlexGrid<Sale>()
    .AutoGenerateColumns(false)
    .CssClass("grid")
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("Start").Width("80").MaxWidth(160).MinWidth(40));
        columns.Add(column => column.Binding("Product").Width("2*").AllowResizing(false));
        columns.Add(column => column.Binding("Country").Format("c") .Width("*"));
    })
    .Bind(Model)
)
```

## See Also

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart)

**Reference**

[FlexGridBase\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.html)