# Columns
Columns are automatically generated by setting the AutoGenerateColumns property to true
## Content
When you bind [FlexGrid](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Grid/C1.Blazor.Grid.FlexGrid.html) to a data source, columns are automatically generated by setting the [AutoGenerateColumns](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Grid/C1.Blazor.Grid.FlexGrid.AutoGenerateColumns.html) property to true. However, for complete control over which columns are displayed, and in what order, you may define the columns using HTML markup.
With automatic column generation as one of the default features of FlexGrid, the control gives you control over each column's width, heading, formatting, alignment, and other properties. To define columns for the FlexGrid, ensure that the **AutoGenerateColumns** is set to false (by default this property is true).
The image below shows how the FlexGrid appears, after defining columns.
The following **code example** demonstrates how to define FlexGrid columns. The below example shows how to define columns in markup, as well as format number and date values. For detailed information about data formats, refer [Data Formatting](/componentone/docs/blazor/online-blazor/controls/flexgrid/column/data_formatting) topic. This example uses the Customer.cs class available in the BlazorExplorer product sample.
```razor
@page "/FlexGrid/ColumnDefinitions"
@using System.Collections.ObjectModel;
@using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.Grid
@code {
ObservableCollection customers;
GridDataMap countryDataMap = new GridDataMap() { ItemsSource = Customer.GetCountries(), DisplayMemberPath = "Value", SelectedValuePath = "Key" };
protected override void OnInitialized()
{
customers = Customer.GetCustomerList(100);
}
}
```