# Grid Editor

The Grid Editor panel allows you to visually edit & design your columns block layout.

You are freely building the complete layout of your `columns` block. You can add or remove blocks, move blocks around freely and adjust Height, Row Gap and Column Gap.

{% hint style="info" %}
When you add or remove blocks, you are adding or removing actual blocks and not just placeholders compared to when Auto Grid is selected.
{% endhint %}

## Open

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

<figure><img src="/files/fVqQ7P64gaPivI6c8RTj" alt=""><figcaption></figcaption></figure>

## Add Block

The Add Block property allows you to add a block.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Click the "+" icon to add a Block.

<figure><img src="/files/t57f5OKd6JvjHAqiaP0L" alt=""><figcaption></figcaption></figure>

## Remove Block

The Remove Block property allows you to remove a block.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Click the "X" icon in the right upper corner of the block to be removed.

<figure><img src="/files/7TXbGFpUlYlzQnA6SN9n" alt=""><figcaption></figcaption></figure>

## Fractions

Adding fractions leaves *potential* space in case you want to add more modules or *stretch* modules to make uneven columns that will be duplicated in subsequent rows. Adding fractions will allow you to add more modules to your row.

This is only *potential* space because the auto grid system will base the grid layout on the module skeleton.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Adjust the number of fractions as required.

<figure><img src="/files/LG2K72sGu2sJ8peULDzR" alt=""><figcaption></figcaption></figure>

## Minimum Height

The Minimum Height property allows you to specify what the minimum height of the columns inside the `columns` block should be.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Adjust the minimal height as required.

<figure><img src="/files/ypUx2BvlD3IfvXlaEDJU" 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.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Adjust the row gap as required.

<figure><img src="/files/QltHfEcbdfOekSogvSd6" 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.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Adjust the column gap as required.

<figure><img src="/files/xnVfU9oSBYua88OHpykg" alt=""><figcaption></figcaption></figure>

## Allow Overlap

The Allow Overlap property allows you to overlap blocks.

* Select a Columns block.
* In the Primary tab of the Block Inspector, open the Grid Editor.
* Toggle Overlap property.

<figure><img src="/files/vxRR4AxbL50uwwCYpwE3" alt=""><figcaption></figcaption></figure>

## Visualiser

The Visualiser allows you to see how your blocks are displayed.

You can stretch and drag and drop your blocks and if overlap is toggled on, you can overlap blocks.

<figure><img src="/files/WgQ4MW6bwhpi2HDyOdHf" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/ZSisDSHinSaZiFLt3G2x" %}
[Auto Grid](/blocks/columns/columns-1/auto-grid.md)
{% endcontent-ref %}

{% content-ref url="/pages/Acnh7dFLGxACXjiQ0q42" %}
[Auto Template](/blocks/columns/columns-1/auto-template.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/blocks/columns/columns-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.