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.

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.
  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 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 Pages 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.
  4. Repeat step 3 for every value in the class folder.

Do you have some feedback for us?

If you have suggestions for improving this article,