The grid layout

Last updated Monday, April 23, 2018 in Sitecore Experience Accelerator for Content Author
Keywords: Layouts

Grid system helps you create responsive websites that have consistent designs and ensure cross-browser support. The grid system divides the page into equal columns.

To make the grid columns visible on a page, on the ribbon, on the View tab, in the Editing section, select Show Grid.

To make the grid columns visible on a page, on the ribbon, on the View tab, in the Show section, select Show Grid.

Depending on the grid system that you use your pages are divided into a number of columns. You can choose how you want to divide your columns on the page. On every SXA page, you can use row and column splitters to divide the available space both horizontally and vertically and create the page structure you need.

For example:

On every SXA page, you can use row and column splitters to create the structure you need.

Picture 3

By default, SXA comes with three different grid systems to select when creating your site: Bootstrap, Foundation, Grid 960. Different grid systems use different margins, column width, behavior, and so on. Most systems break things down by device type (for example, mobile, tablet, desktop).

Select the grid system for your site in the wizard.

Note

It is important to be aware that changing the grid system after you created the site will require many manual changes. Because of the references on your pages to the former grid system, your layout will break.

SXA supports integrating other grid frameworks and you can also build your own.

Send feedback about the documentation to docsite@sitecore.net.