The grid settings

Version: 10.4

A grid system is a library of HTML/CSS components that let you structure a website easily. Grid systems help you create responsive websites that have consistent designs and ensure cross-browser support. Understanding how the SXA grid layout works provides you with an insight into how to use and change grid settings, and how to add classes.

The grid systems

By default, SXA comes with the following grid systems:

  • Tailwind - responsive, mobile-first grid system with a customizable, 12-column layout that includes predefined utility classes. The default devices are:

    • Mobile

    • Tablet Portrait

    • Desktop Small

    • Desktop Regular

    • Desktop Large

    • Desktop XL

  • Bootstrap 5 - responsive, mobile-first system with jsDelivr, auto margins, and a template starter page. The default devices are:

    • Mobile

    • Mobile landscape

    • Tablet portrait

    • Desktop small

    • Desktop regular

    • Desktop large

  • Bootstrap 4 - responsive, mobile-first grid system with a 12-column layout that includes predefined classes. The default devices are:

    • Compact phones

    • Phones

    • Tablets

    • Laptops

    • Desktops

  • Bootstrap 3 – responsive, mobile-first grid system with a 12-column layout that includes predefined classes. The default devices are:

    • Phones

    • Tablets

    • Desktops

    • Large desktops

  • Foundation – responsive, mobile-first grid system with 12-column flexible grid that can scale out to an arbitrary size. The default sizes are:

    • Small

    • Medium

    • Large

  • Grid 960 – 12-column grid, based on a width of 960 pixels. The default settings are:

    • Size

    • Prefix

    • Suffix

All grid systems have different system rules, classes, and options. For more detailed information, refer to the different grid systems' own documentation.

You can select a grid system when you create a site. If you do not select a grid during the site creation process, by default the Bootstrap 5 grid system is applied.

You can select a grid during site creation, in the Create a new SXA site dialog.

In the site Settings folder (Sitecore/Content/Tenant/Site/Settings), in the Grid section, in the Grid Mapping field, you can map devices to a specific grid system. For every new device that you add, you must configure the grid mapping manually. You must select the same grid system that you selected for the site in the Create a new SXA site wizard. For example, you can use the Grid 960 system for mobile devices.

Note

It is important to be aware that changing the grid system after you create your site requires many manual changes. Because of the references on your pages to the previous grid system, making a change to the grid system breaks your layout.

The grid definition

Grid systems are stored as a feature in Sitecore (sitecore/System/Settings/Feature/) and include:

  • The Grid Definition item – includes all grid system specific items (the devices and their classes).

  • The Grid Setup item – the scaffolding item to include the grid in the drop-down list of the Create a new SXA site wizard.

The Grid Definition item includes all grid system specific items that a content author can use in the Experience Editor.

The grid definition item in the content tree of the Content Editor app.

The following fields are included in the Grid Definition item:

Field

Description

Name

The name of the grid system as you want it to display in the site creation wizard.

Rendering parameters field type

Determines the way the grid parameters are rendered. The default field renderer is:

Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid

Default component layout

Sets the default column size for renderings that you drag on the page. You can set a value for different types of devices. The value specifies the number of columns.

Grid theme

Links to the theme used for the grid.

Grid field parser type

Determines the parser type to parse the grid fields. The default grid field parser type is:

Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid

Grid body view path

Path to your CSHTML file that defines the body layout of a page.

Flex

List of CSS classes that determines the way placeholders behave when they are not set to a fixed size. For example, row expanded.

Fixed

Set of CSS classes that determines the way placeholders behave when they are fixed. For example, row.

Row class

CSS class added to the div elements generated for the Row Splitter rendering.

Row Container Class

CSS class added to the parent div element of all rows.

Wrapping tag

Wraps the placeholder tag in the tag you specify here, for example div. To specify a class, enter it in the Wrapping class field, for example row. If you do not need a wrapping tag to be rendered, clear both fields.

Note

Depending on the grid system you are using, this field might already be configured.

Wrapping class

Assigns a class to the tag specified in the in the Wrapping tag field.

Note

Depending on the grid system you are using, this field might already be configured.

The Grid Setup item includes the following fields:

Field

Description

Name

The name of the grid system as you want it to display in the site creation wizard.

Dependencies

Lets you determine the order in which the features are installed.

Grid Definition

Refers to the Grid Definition item. For example, for the Foundation grid system: Settings/Feature/Experience Accelerator/Foundation/Foundation

You can change the default layout settings of the renderings in the grid definition item of the grid system. For example, for the Bootstrap 5 grid (sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5):

Example of chanting the layout settings of a grid in the grid definition item.

The grid classes

The classes defined in the Grid Definition item correspond to the grid system details in the Media Library. For example, in the Experience Editor, you have the option to hide a rendering for visitors using a large desktop.

Example of enabling a setting that hides the chosen component if a visitor is on a large desktop.

This option is set in the Display settings of the Bootstrap grid system (sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap/Bootstrap 5/Desktop Large/Display/None):

Example of how the option to hide a component for large desktops is set in the Display settings of the grid itself.

This class is taken from the bootstrapmin.css file loaded in the Media Library (sitecore/Media Library/Feature/Experience Accelerator):

Example showing that the class pulled from the bootstrapmin.css in the Media Library.

Do you have some feedback for us?

If you have suggestions for improving this article,