# Settings

Here's the settings available to setup your grid system with Gridle:

## `min-width`

Specify the `min-width` for the state. This has to be used in the `g-register-state` mixin.

- default: `null`

## `max-width`

Specify the `max-width` for the state. This has to be used in the `g-register-state` mixin.

- default: `null`

## `query`

Specify a custom query for the state. This has to be used in the `g-register-state` mixin.

- default: `null`

## `columns`

Specify the number of columns for your grid system. This has to be used in the `g-setup` mixin.

- default: `12`

## `rows`

Specify the number of rows for your grid system. This make the system to generate `n` rows classes to use in your html.
This setting does not make your grid to have `n` rows every time. It's just to generate the classes that make you able to set the row `start` like so:

```html
<div class="gr gr--rows-4">
  <div class="col col--6 col--start-4 row row--2 row--start-2">
    Something...
  </div>
</div>
```

- default: `12`

## `column-width`

This is used to calculate your grid proportions like the gutters, etc... It does not mean that your columns will be this value width.
Think of this like so:

- For a grid of `width` wide, I want `columns` columns of `column-width` width

The Gutters will be calculated automatically unless you specify them using the `gutter-width` setting described below.

- default: `60`

## `width`

This is used to calculate your grid proportions like the gutters etc... It does not mean that your grid will be this value width.

Think of this like so:

- For a grid of `width` wide, I want `columns` columns of `column-width` width

The Gutters will be calculated automatically unless you specify them using the `gutter-width` setting described below.

- default: `960`

## `gutter-width`

This specify a value for your gutter width. This setting is optional and if you let it to `null`, your gutters will be calculated automatically depending on your `width`, `columns` and `column-width`.

- default: `null`

## `container-width`

This specify the width of your grid container. Your grid will actually be this width wide. This has to be an absolute value like `vw`, `%` or `px`.

- default: `90vw`

## `container-max-width``

This does exactly what it means. It set the container `max-width` value so your grid does not became too wide.

- default: `1200px`