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