
# Automatic adjustment of column width

RealGrid provides several ways to fit the entire set of top-level columns to the width of the grid.

#### none

No filling is done in the remaining area.

```js
gridView.displayOptions.fitStyle = "none";
```

#### even

If the width of the entire column is smaller than the grid area, the width of each column is proportionally distributed to the width of the grid according to the width property value.

```js
gridView.displayOptions.fitStyle = "even";
```

#### evenFill

Regardless of the overall width of the column, the width of each column is always distributed proportionally to the width of the grid according to the width property value.

```js
gridView.displayOptions.fitStyle = "evenFill";
```

#### fill

If the entire width of the column is smaller than the grid area, columns with a fillWidth value of 0 or less are left untouched, and columns with a fillWidth value of greater than 0 are distributed according to the fillWidth ratio. In the example below, only the “Name” and “Gender” columns have fillWidth values set to 1.

```js
gridView.displayOptions.fitStyle = "fill";
```

#### Difference between even and evenFill

In the case of even, the remaining area is distributed proportionally only when the sum of the column numbers is less than the grid width, and in the case of evenFill, the remaining area is always distributed proportionally regardless of whether there is a remaining area or not.
Therefore, if there is any remaining area, the results of even and evenFill are the same.

Resize each column to remove excess area and check the results of evenFill.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', fillWidth: 1, header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', fillWidth: 1, header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' } },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: { height: 40 },
  display: { rowHeight: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { width: 16 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function fitStyleNone() {
  gridView.displayOptions.fitStyle = 'none';
}

function fitStyleEven() {
  gridView.displayOptions.fitStyle = 'even';
}

function fitStyleEvenFill() {
  gridView.displayOptions.fitStyle = 'evenFill';
}

function fitStyleFill() {
  gridView.displayOptions.fitStyle = 'fill';
}
```