What is the Page Builder's Grid System?

In this article, you'll learn how to use the Page Builder's Grid System to create your desired layout on pages

Written by Marcel Korporaal Updated over a week ago

After reading this article you will know:

What the Page Builder's grid system is.

Why the Page Builder uses the grid system.

How the grid systems can also handle your page's responsiveness.

Our grid system is a adaption of the Bootstrap grid system to the Page Builder. If you'd like to use the Grid System in Custom HTML, be sure to check out Bootstraps documentation too.

What is the Page Builder's grid system?

You could see the grid system as a framework which translates your page into a customizable, responsive table, called a grid.

On this grid you can add grid rows, on to which you can add grid columnsThe grid rows define the vertical layout, meaning how many components you can place beneath eachother, while grid columns defines the horizontal layout, meaning how many components you can put next to each other.

The grid system works with 12 columns. So one columns can be at most 12 columns wide, which will cover the entire row. The column width can be any number from 1 to 12.

How can the grid system handle the responsiveness of my app?

You can also define responsiveness between different screen sizes. All screen sizes are divided within 4 sizes:

XS: Phones/Extra small devices (< 768px)

SM: Tablets/Small devices (≥ 768px)

MD: Desktops/Medium devices (≥ 992px)

LG: Larger desktops/Large devices (≥ 1200px)

As you can see, you can select a different column width for every screen size.

When you only select an option in the first dropdown, "Width", all screen sizes will follow this width. For each screen size you that want to differ from this, you can set it at the specific screen size, since that will override the first option.

What was that? Can you visualize this for me? Of course we can!

Take a look at this visual explanation of the grid system. (textual explanation below)

As you can see, the page is one giant grid, with 3 grid rows and the first grid row has 3 grid columns.

The other rows have got columns also, but they're not highlighted in the image. The second grid row has one grid column which covers the whole grid row. The third grid row has 2 grid columns in it. But in the second grid column, there are also 2 columns, because the inputs are next to each other.This can be achieved by adding a grid inside a grid column. You can put grids inside of grids inside of grids to go as deep as you want.

By using the grid system in a smart way, you can quickly develop pages which follow your desired layout and also respond to the size of the user's screen.Tip: If you'd like to re-use a layout you created on another page, you can create a partial of this.