The grid layout

Current version: 10.4

Grid system helps you create responsive websites that have consistent designs and ensure cross-browser support. The grid system divides the page into a number of columns. You can choose how you want to divide your columns on the 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:

Different options to divide columns on the page.

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).

In Experience Editor, to make the grid columns visible on a page, on the ribbon, on the View tab, in the Show section, select Grid.

Show grid

By default, SXA comes with the Bootstrap 5 grid system. SXA supports integrating other grid frameworks and you can also build your own.

Note

Changing the grid system after you created the site will require multiple manual changes. Because of the references on your pages to the former grid system, your layout will break.

Do you have some feedback for us?

If you have suggestions for improving this article,