# Grid

A CSS-Grid container where every child cell is the same size. Pick the number of columns and the gap, then drop blocks in. The grid automatically wraps content into rows.

## Available in

* Page modules
* Order Form modules
* Catalog modules
* Public Page modules

Grid isn't available in Dashboard, Modal, Reports, or Navigation modules.

## When to use

* Dashboards with several stat cards or quick-access tiles in a uniform grid.
* Product card grids (when not using Catalog Display, which has its own grid).
* Anywhere you want to drop N items and have them lay out in a clean N-column grid without manually managing rows.

For non-uniform sections (e.g. one wide column + two narrow), use **Row + Column** instead.

## Settings

| Setting               | Description                                                     |
| --------------------- | --------------------------------------------------------------- |
| **Number of columns** | Number of grid columns. Range: 1–12. Default: 4.                |
| **Gap**               | Spacing in pixels between cells. Default: 24.                   |
| **Printable**         | Whether this grid appears in the print stylesheet. Default: No. |

## How it works

Children render into the next available cell automatically — no need to define rows. With 4 columns set and 8 children, you get 2 rows of 4. With 6 children, you get 1 row of 4 plus 1 row of 2.

The grid uses CSS Grid under the hood, so cells maintain equal width even with different content.

{% hint style="info" %}
Grid disallows **Hero** and **Stats** as direct children — those blocks are designed for full-width or row-based layouts and don't fit a grid cell. Use Row + Column for those.
{% endhint %}

## Examples

**Dashboard tile grid.** Grid with 3 columns, gap 24. Drop 6 Card Link components inside — produces 2 rows of 3 quick-access tiles.

**Product spec grid.** Grid with 2 columns. Drop pairs of Heading + Text blocks for a clean spec sheet.

**Action launcher.** Grid with 4 columns, gap 16. Drop 8 Cards (one per common action) for a launcher screen.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Row</strong></td><td>For non-uniform horizontal layouts.</td><td><a href="/pages/X8iFEn2kZKLwzxA43m0n">/pages/X8iFEn2kZKLwzxA43m0n</a></td></tr><tr><td><strong>Catalog Display</strong></td><td>The product-specific grid that handles its own layout.</td><td><a href="/pages/dAjRJ2GOz4uRXrOSvCJA">/pages/dAjRJ2GOz4uRXrOSvCJA</a></td></tr><tr><td><strong>Layout &#x26; Responsive</strong></td><td>How grids reflow on smaller screens.</td><td><a href="/pages/i16RUpMIJ1hqIym73t8h">/pages/i16RUpMIJ1hqIym73t8h</a></td></tr></tbody></table>


---

# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/layout-components/grid.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.