# Settings

The Columns Settings panel allows you easy access and control over the structure and alignment of the contents of your page.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Settings tab.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FNVm0KWXKhAKsXghR1ysQ%2Fsettings%20columns.jpg?alt=media&#x26;token=82efed6b-5af2-407c-87aa-9993455ea91d" alt=""><figcaption></figcaption></figure>

### Manual Grid

When all Auto properties are deactivated in the Grid Settings of the columns block, the grid layout will rely on a fully manually created grid layout through the Grid Editor.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMriHNcE2ZfNanRfg4zNr%2Fmanual%20grid.jpg?alt=media&#x26;token=360deee8-abc9-4757-939c-a256fcc17f74" alt=""><figcaption></figcaption></figure>

## Auto Grid

The Auto Grid property allows you to define whether the columns block should automatically repeat the layout that is used for the first row over to the next rows (if there are enough [`column`](https://docs.cwicly.com/blocks/column) blocks).

With Auto Grid selected, the module button allows you to add the number of modules you set for the row. A module can be thought of as a placeholder for your [`column`](https://docs.cwicly.com/blocks/column) blocks.

{% hint style="info" %}
You cannot add more modules than the number of fractions you have set.
{% endhint %}

{% hint style="warning" %}
When the Auto Grid property is active, only the first row of the layout built in the [Grid Editor](https://docs.cwicly.com/blocks/columns/columns-1) will be used as a pattern. For this reason, Cwicly will not apply/modify your layout if you have set more than one row to the Grid Editor.
{% endhint %}

{% content-ref url="columns-1/auto-grid" %}
[auto-grid](https://docs.cwicly.com/blocks/columns/columns-1/auto-grid)
{% endcontent-ref %}

{% content-ref url="columns-1" %}
[columns-1](https://docs.cwicly.com/blocks/columns/columns-1)
{% endcontent-ref %}

## Auto Template

The Auto Template property allows the browser to handle the responsiveness of the Columns layout, showing fewer columns on smaller devices, and more columns on bigger devices.

{% hint style="warning" %}
The Auto Template property will only appear if the Auto Grid property is active.
{% endhint %}

{% content-ref url="columns-1/auto-template" %}
[auto-template](https://docs.cwicly.com/blocks/columns/columns-1/auto-template)
{% endcontent-ref %}

### Auto Fill

The Auto Fill property fills the row with as many columns as it can fit. It creates implicit columns whenever a new column can fit.

* Select a columns block.
* Navigate to the Primary tab of the Block Inspector.
* Open the Settings tab.
* Toggle Auto Fill as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FKZH2s1q3zi3mDAInYBK9%2Fauto%20fill%20.jpg?alt=media&#x26;token=929662cf-e487-4bca-8607-fc21cdc24991" alt=""><figcaption></figcaption></figure>

### Auto Fit

The Auto Fit property fits the available columns into the space by expanding them so that they take up all the available space.

* Select a columns block.
* Navigate to the Primary tab of the Block Inspector.
* Open the Settings tab.
* Toggle Auto Fit as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3QI4hxRld9NivLI77uam%2Fauto%20fit.jpg?alt=media&#x26;token=b80b0900-b551-4932-bbbc-b66bc4c33c87" alt=""><figcaption></figcaption></figure>

## Add/Remove Column

The columns block is a parent block made up of one or more [`column`](https://docs.cwicly.com/blocks/column) blocks.

### Add

* Select a columns block.
* Open Primary tab in the Block Inspector.
* Click "+" icon to add a Column Block.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FABSKeJkpFZbEbeaaNDpo%2Fadd%20column.jpg?alt=media&#x26;token=564a758c-d004-40fb-bcc9-96c31bbaa882" alt=""><figcaption></figcaption></figure>

### Remove

* Select a columns block.
* Open Primary tab in the Block Inspector.
* Open the Settings tab.
* Click "-"  icon to remove a Column Block

{% hint style="info" %}
The :heavy\_minus\_sign: button that appears in the `columns` block Primary Tab will only remove the last column (and its contents)  in the block..
{% endhint %}

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FKhjDRNkAveI0Z09o9Oda%2Fremove%20column.jpg?alt=media&#x26;token=af98361f-f5eb-479c-b10c-fda5f21bc504" alt=""><figcaption></figcaption></figure>

## Minimum Height

The Minimum Height property allows you to specify the minimum height of each column inside the `columns` block.

* Select a columns block.
* Open Primary tab of the Block Inspector.
* Open the Settings tab.
* Find the Minimum Height property.
* Enter the desired value.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FrSHw3I2AtAznbNF3XPZR%2Fmin%20height%20columns.jpg?alt=media&#x26;token=1a89b3dc-b9b3-4236-8b88-23e0fa742ef2" alt=""><figcaption></figcaption></figure>

## Row Gap

The Row Gap property allows you to specify the space between every row of columns.

* Select a columns block.
* Open Primary tab in the Block Inspector.
* Open the Settings tab.
* Find the Row Gap property.
* Enter the desired value.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQENiGGmlKHeSCzJb7efD%2Frow%20gap%20columns.jpg?alt=media&#x26;token=a3f4fde6-9e54-46c4-81b1-ff987ca6c937" alt=""><figcaption></figcaption></figure>

## Column Gap

The Column Gap property allows you to specify the space between every column in a row.

* Select a columns block.
* Open Primary tab in the Block Inspector.
* Open the Settings tab.
* Find the Column Gap property.
* Enter the desired value.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FxPWzfy9D6CvQyu6kLwZ5%2Fcolumn%20gap.jpg?alt=media&#x26;token=013765ac-0d31-499f-af83-0594e556e7fa" alt=""><figcaption></figcaption></figure>
