The Uncode Grid System consists of an advanced responsive and fluid grid system based on 12 columns with dozens of options. It includes predefined options for easy layout as well as powerful presets to create any layout. The Uncode grid system’s conceptual design was inspired by the Bootstrap grid system and uses a similar modular approach. The grid system is used to create page layouts using a selected series of rows and columns to house your content.
How Uncode’s Grid System works:
- Rows are the primary containers. They are used to create horizontal groups of columns.
- Content needs to be placed within columns. Only columns can be the immediate children of rows.
- Columns create gutters or gaps between column content. You are given 5 presets to work with: 0px, 1px, 18px, 36px and 72px. This settings are referred inside the admin options as 0px, 1px, 1x, 2x, 3x, 4x.
- Columns can be of equal height, enabling you to create perfect blocks in a modernistic layout where colored columns match perfectly.
- Grid columns are created by specifying the number of columns (up to 12) you wish to span.
- In Mobile device and Tablets views (unless specified by the responsive options) columns are stacked on one other and row height collapse.
Uncode Grid System use the following breakpoints:
- For small devices (phones), less than 569px
- For medium devices (tablets), 570px to 959px
- For desktop devices , 960px and up
- Video Tutorial: Grid System – Video Tutorial