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 can help you use and change grid settings, and add classes.

Grid systems

By default, when you create a site, it comes with Bootstrap 5, which is a responsive, mobile-first system with jsDelivr, auto margins, and a template starter page. Its default devices are:

  • Mobile

  • Mobile landscape

  • Tablet portrait

  • Desktop small

  • Desktop regular

  • Desktop large

There is also a set of built-in items for other grid systems that you can use, for example, Bootstrap 4, Tailwind, and Foundation.

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 will break your layout.

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

Settings for the grid definition and grid setup items

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

  • The Grid Definition item – includes all grid system specific settings, the devices, and their classes that a content author can use in the Experience Editor and Pages applications.

  • The Grid Setup item – for setting up modules for the scaffolding, including specifying dependencies.

The grid settings in the Content Editor

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 components 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 changing 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 a component if the visitor uses a large desktop

This option is set in the Display settings of the Bootstrap 5 grid system (sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5/Large Desktops/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 bootstrap.css in the Media Library.

Do you have some feedback for us?

If you have suggestions for improving this article,