# Layout
The Layout tab allows you to modify how your Items are displayed in your `Query Template` block. This includes Display, Grid Type, Auto Grid, Auto Template as well as Height, Column and Row Gap.
{% hint style="warning" %}
By default, the `Query Template` block will have an Auto Grid layout. If you want a Masonry layout you will need to activate it.
{% endhint %}
## Display
The Display property allows you to show how you want your Posts or Pages displayed.
{% hint style="info" %}
By default this is set to Grid layout but you have other choices including flex, inline-flex, block, inline-block, inline, table or none (if you want nothing displayed).
{% endhint %}
Choose
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Select required type in dropdown
## Masonry layout
The Masonry property allows you to choose a Masonry grid layout based on columns with no fixed height so that images in additional rows will rise up to fill the gaps.
With Masonry layout selected, you can customise: number of columns, row gap and column gap.
Activate
1. Select a `Template Query` block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Click dot to activate Masonry layout
6. Modify (number of columns, row gap and column gap)
Deactivate
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Click dot to deactivate Masonry layout
## Auto Grid
### Auto grid activated
The Auto Grid setting means that Cwicly will automatically repeat the row layout you have set out in the Edit Grid Layout.
{% hint style="info" %}
The Query Template layout that you set out is not dependent on your Items.
{% endhint %}
The Items you add are automatically placed following the layout skeleton you have defined in the Auto grid layout.
### Auto grid deactivated
With Auto grid deactivated, you have complete freedom as to how you design your Items, how they look and feel. With auto grid turned off, each module is now unique as it is not reproduced in subsequent rows.
{% hint style="danger" %}
If you want to add or remove Items, you need to go to Pagination in the Query settings of the Query Block and modify the number of Items per Page.
{% endhint %}
Activate/Deactivate
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout panel
5. Click dot to activate/deactivate Auto Grid
## Auto Template
The Auto Template property automatically adjusts the responsiveness of the Query template layout for the different screen sizes available.
When the auto template setting is selected, you can choose whether to use Auto Fill or auto Fit.
Auto Fit is automatically selected and will fit your blocks into the available space.
If Auto Fill is selected, the width that has been chosen will be respected rather than the space available.
Toggle on/off
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Find Auto Grid
6. Click dot to toggle Auto Grid
### Auto Fill
With Auto Fill selected, the width that has been chosen will be respected rather than the space available.
Toggle
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Click to activate Auto Template
6. Find Auto Fill
7. Toggle on/off
### Auto Fit
With Auto Fit selected, your blocks will be fitted into the available space.
Toggle
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Open the Layout tab
5. Click to activate Auto Template
6. Find Auto Fit
7. Toggle on/off
## Set Minimum Height, Row Gap or Column Gap
Minimum Height, Row Gap or Column Gap can be modified in the Layout Tab but also from the grid editor.
Modify
1. Select a Template Query block
2. Open the block inspector
3. Navigate to the primary tab
4. Find Grid Editor tab
5. Open Grid Editor
6. Find Minimum Height, Row Gap, Column Gap
7. Modify Minimum Height, Row Gap or Column Gap as required
---
# 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/query-template/layout.md?ask=
```
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.
