After reading this article you will know:
- What the UI Builder's grid system is.
- Why the UI 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 UI Builder. If you'd like to use the Grid System in Custom HTML, be sure to check out Bootstraps documentation too.
What is the UI 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 columns
The grid rows define the vertical layout ("How much components do you want to place beneath each other?") and the grid columns define the horizontal layout. ("How much components do you want to place next to each other?" / "How wide do you want each component to be?" )
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 their 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. Don't go to deep though, you might end up in Limbo. (Gridception!)
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. And that is exactly what a citizen developer would like as a front end, right?
Tip: If you'd like to re-use a layout you created on another page, you can create a partial of this.
Something not quite clear? Encountered an obstacle which you can't seem to get over? Didn't like our Inception reference? (We know, it's actually recursion, not inception) Or do you have some feedback?
Don't hesitate to contact us via the Intercom logo at the bottom right of your screen. We'd love to hear your experience with this HowTo!