The SXA grid layout

Last updated Tuesday, August 30, 2016 in Sitecore Experience Accelerator for Content Author
Keywords: Layouts

The SXA 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. Currently, SXA supports a 12-column responsive grid.

To make the grid columns visible on a page, on the ribbon, on the View tab, in the Show 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.

The 12-column grid is 960 pixels wide. You can choose how you want to divide your columns on the page. By using the SXA grid system, you can achieve visual consistency because the elements are always vertically aligned to one of the columns. 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

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