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 power settings 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 contents and Elements. Rows and Columns are at the very core of the Page Builder. 

Uncode Grid System (horizontal and vertical rhythm) makes the layouts harmonic and modulates the development. Presets are often defined for padding, vertical spacing, Column gaps, and most options. These presets are referred inside the admin options as 0px, 1px, 0.5x, 1x, 2x, 3x, 4x, 5x, 6x and refer to 0px, 1px, 18px, 36px, 72px, 108px, 144px. Presets adjust in size based on specific breakpoints to ensure they remain harmonious and decrease in value on increasingly smaller screens.

Specifications

• Rows are the primary containers and they are used to create horizontal groups of Columns.
• Rows can be limited, full-width, full-height and have different padding and design settings.
• Elements are placed within Columns. Only Columns can be the immediate children of Rows.
• Columns are created by specifying the number of Columns (up to 12) you wish to span. 
• Columns create Gaps between content that can be adjusted.
• Columns can be of Equal Height, enabling you to create perfect blocks in a modernistic layout.

Breakpoints

In Device and Tablet, unless specified by the Column Responsive Options, Columns are stacked on one other and Row height collapse.

• Device: less than 569px.
• Tablets: 570px to 959px.
• Desktop: 960px and up.

• Video Tutorial: Grid System Video