# Star Sizing

## 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-core/WorkingwithControls/FlexGrid/FlexGridQuickStart) section.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/flexgridstarsizing1.png)

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

**StarSizingController.cs**

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

**StarSizing.cshtml**

```html
@using TagFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<c1-flex-grid auto-generate-columns="false" class="grid" is-read-only="true">
    <c1-flex-grid-column binding="Start" width="80" max-width="160" min-width="40"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" width="2*" allow-resizing="false"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country" format="c" width="*"></c1-flex-grid-column>
    <c1-items-source source-collection="@Model"></c1-items-source>
</c1-flex-grid>
```