---
title: "Walkthrough: Setting up a custom grid"
slug: "walkthrough--setting-up-a-custom-grid"
abstract: "How to create a custom grid."
---
# Walkthrough: Setting up a custom grid

The Pages editor uses the SXA grid to determine the look and feel of the editor. In the Pages editor, the grid specifies the breakpoints for displaying components. You can either use the standard grid, Bootstrap 5, or a [custom grid](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/grid/the-grid-settings.html).

> [!important]
> The layout defined on the rendering host site must be configured to support the grid system that you want to use.

This walkthrough describes how to:

- Define grid breakpoints
- Change the display types
- Specify Pages icons for buttons

## Define grid breakpoints

The breakpoints determine the visual position of elements on your site when displayed in a browser. These breakpoints do not always align with the sizes defined in the Pages device switcher. If you use a custom grid, you must define the breakpoints for your grid.

To define the breakpoints for your custom grid:

1. Navigate to */sitecore/system/Settings/Feature/<My project>/<My grid>*.
2. Open a device folder, for example, *Small*.
3. In the **Grid Breakpoints** section, enter the **Min** and **Max** values.

    ![You must set the min and max values for breakpoints for every device size in your grid.](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/62c8db95-7eee-4722-a1c2-079f8d6dc83b.png)

4. Repeat this for every device.

> [!note]
> By default, the breakpoint values are pixels. You can also specify em units. If you leave the fields empty, SXA assumes *Min* to be `-Infinity`, and *Max* to be `+Infinity` pixels.

## Change a display type

The SXA grids have default display types configured. If you want, you can change the look and feel for your editors. To do so, you can specify other [display types](https://doc.sitecore.com/sai/en/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/display-types-for-styles.html "Display types for styles") for each set of grid-specific CSS classes. This affects how the style displays for the user in the Pages editor. These CSS classes are usually grouped in sets, for example, *Size*, *Order*, *Offest*, *Float*, and *Visibility*. The available sets depend on your selected grid system.

To set the display type for your grid:

1. Navigate to a device that you have set breakpoints for, and click a CSS class folder.
2. In the **Data** section, click the **Type** drop-down menu, and then click the display type that you want.
3. Repeat steps 1 and 2 for any class folders that you want to change the display types for.

## Specify a Page builder icon for a button

If you change a grid-specific display type to one that uses buttons, you must specify the Pages icon for each button. If you do not do this, your editors will only see blank buttons.

To specify a Pages icon:

1. Navigate to your grid, select a device size, and expand on a CSS class folder that you have set to use an icon display type.
2. Click the value you want to set the icon for.
3. In the **Data** section, in the **Icon** field, enter a CSS class for the icon. The following screenshot shows the `align-left` class specified for the *Left* value.

    ![Under Icon, you can specify a CSS class for the icon for each value in your CSS style.](https://doc.sitecore.com/api/markdown-image/sai/en/developers/sitecoreai/images/c7e9b7b8-f690-4894-ad0e-5900300a14fd.png)

4. Repeat step 3 for every value in the class folder.