> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superoffice.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Working with grids

> How to add and populate grids in a layout using the Screen Designer in Settings and maintenance.

<Note>
  This feature requires a license for [Development Tools][1] or the CRM Suite **Core** plan.
</Note>

[1]: /en/admin/license/expander-services

If you have many fields, you can use a grid element to position them with more finesse. This is an alternative to positioning based on sort order and columns.

The instructions below assume you are already [editing the layout][1].

## Add a grid

1. Select the tab you want to add a grid to.

2. Click to select the **Elements** section.

3. Click and drag the **Grid** element to the layout.

   ![Screen Designer grid element -screenshot][img1]

4. Click to select the new grid.

5. In the **Settings** sections to the left, adjust the number of columns and rows to suit your needs.

   ![Screen Designer grid settings -screenshot][img2]

6. Choose a grid style: lines (default), none, or header.

## Add field to grid

1. Go to the location of the grid.

2. Hold the pointer over the grid and click the blue pencil.

   ![Screen Designer grid enter edit mode -screenshot][img3]

   This places the grid in edit mode, indicated by a green checkmark.

   ![Screen Designer grid in edit mode -screenshot][img4]

3. Make sure the **Fields** section is selected.

4. [Drag fields from the list][2] to a cell in the grid. You can also add [labels][3], [links, and buttons][4].

   <Tip>
     Tab from cell to cell for efficient input.
   </Tip>

5. When you are done, click the green checkmark to lock the grid and resume normal edit mode.

## Edit grid contents

1. Place the grid in edit mode as described above.

2. To move a field, click **=** to the left of the field and drag it to a new cell.

   If you drop a field into an occupied cell, the contents of the two cells are swapped.

3. To remove a field, hold the pointer over the cell and click the red circled x.

## Edit grid appearance

1. Select the tab containing the grid.
2. Click the grid in the preview. Make sure the grid itself is not in edit mode. Click the green checkmark if you see it.
3. In the **Settings** section, adjust the grid's dimensions and style.

<Note>
  You cannot remove specific rows or columns, however, you can reduce the number of rows and columns. When you decrease the number of rows, the **last row** disappears from the user interface along with its contents. When you decrease the number of column, the **last column** disappears. Rearrange your fields first to avoid surprises.
</Note>

## Move grid

To move a grid, click **=** to the left of the grid and drag the field to a new position. This is similar to moving fields.

## Remove grid

When you remove a grid, its contents (fields and so on) is removed too.

This action affects only what is shown in the user interface, and does not change the database or values in any way.

To remove a grid:

* Hold the pointer over the grid and click the red circled x.

To restore a grid:

* If you are working on a draft, simply discard the draft to undo all your changes.
* If you have published the layout after removal, you need to recreate the grid.

[1]: ./edit-layout

[2]: ./working-with-fields

[3]: ./working-with-tabs#label

[4]: ./add-button

[img1]: /media/loc/en/customization/new-grid.png

[img2]: /media/loc/en/customization/grid-settings.png

[img3]: /media/loc/en/customization/hover-grid.png

[img4]: /media/loc/en/customization/edit-grid.png


## Related topics

- [Working with tiles](/en/dashboard/learn/working-with-tiles.md)
- [Importing from ERP](/en/api/plugins/erp-connectors/import.md)
- [Tutorial (company)](/en/api/plugins/erp-connectors/tutorial.md)
- [Working with Zaps](/integrations/zapier/howto/index.md)
- [Working with preferences](/en/admin/preferences/update.md)
- [Working with fields](/en/customization/screen-designer/admin/working-with-fields.md)