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.
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:
-
Navigate to /sitecore/system/Settings/Feature/<My project>/<My grid>.
-
Open a device folder, for example, Small.
-
In the Grid Breakpoints section, enter the Min and Max values.
-
Repeat this for every device.
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:
-
Navigate to a device that you have set breakpoints for, and click a CSS class folder.
-
In the Data section, click the Type drop-down menu, and then click the display type that you want.
-
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:
-
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.
-
Click the value you want to set the icon for.
-
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. -
Repeat step 3 for every value in the class folder.