# Cells and grids {% embed url="" %} The grid is made up of cells, and each element, or group of elements, gets its own cell. In a grid, you can add multiple cells to arrange elements in a specific order and control their size. Cells and grids are powerful tools to create structured and responsive layouts, ensuring your page looks stunning on any device.

## Add a grid to a section {% hint style="success" %} **Steps:** 1. Click **Add elements**

on the left side of the Editor or press **E**. 2. Click **Quick add**, locate and drag the **Grid** element to the canvas. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FPnFt79LwgWR1KuessrXw%2Fimage.png?alt=media\&token=bfdb5869-139b-4bf3-b710-7c9d4511e72c) or Click **Layout** in the **Advanced elements** section, select a grid layout you want, and drag it to the canvas. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FO76QnvdvUft4FyF4xMJm%2Fimage.png?alt=media\&token=5e97fc6a-6778-4582-a6aa-e6df4d3d80c6) {% endhint %} ## Customize a grid ### Change a grid layout Customize your grid to get the exact layout you want. You can change the **number of grid columns**, adjust the **cell size**, and the **gap** between them using the Inspector panel. {% hint style="success" %} **Steps:** 1. Click the relevant grid. 2. In the **Inspector** panel > **General** tab, locate the **Layout** settings. 3. Change the number of columns (between 1-12 columns). Set the column gap and row gap between the grid cells. For mobile view, you can enable the cells to be swipeable. {% endhint %}

### Add more cells to the grid You can add up to 12 cells in a grid. {% hint style="success" %} **Steps:** 1. Click the relevant grid. 2. In the **Inspector** panel > **General** tab, locate the **Manage cells** section. 3. Click **Add cell** to add more cell to the selected grid. {% endhint %} {% hint style="info" %} Easily duplicate or reorder a cell using the **Manage cells** section. {% endhint %}

{% hint style="warning" %} Your design only applies to the breakpoint you're working on. You should tailor the grid to each breakpoint to ensure the composition of your elements is flawless. {% endhint %}

### Manage the cell size Manage the cell size (width and height), or expand it to create a hierarchical grid. {% hint style="success" %} Steps: 1. Select the relevant cell. 2. In the **Inspector**, locate the **Size** section. 3. Set the column span, row span, width, and height of the cell. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FiFWm664AaW11IPTXakqA%2Fimage.png?alt=media\&token=774eaaa1-5a64-4e21-8126-4f834af9c1f8) {% endhint %}

For example, in the grid below: * [Grid layout](#change-a-grid-layout): Columns setting is set 3 columns.

* After setting the first cell is set to have: * Column span: 2 columns. * Row span: 2 rows.

### Delete a cell You can remove a cell at any time. This deletes both the cell and the element within. {% hint style="success" %} Steps: 1. Select the relevant cell. 2. Click the **Delete**

button on your keyboard. or 1. Select the grid that contains the cell you want to delete. 2. In the **Inspector** panel > **General** > **Manage cells**, click the **Remove**

button next to the relevant cell. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F2HwAcqF6a9BmD9yoLs2l%2Fimage.png?alt=media\&token=4a25ce63-4168-4df6-8f40-381bc0fc1156) {% endhint %} --- # 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.foxecom.com/foxify-app/foxstudio/layout-and-styling/cells-and-grids.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.