Using
SmartKit grid system allows you to place components in a single row, apply the desired column width and the gaps between them. The capabilities of the SmartKit grid are wider than the standard WPBakery Page Builder grid.
You can adjust the alignment of the column elements and column width for different devices screen.
Column — 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Column — 1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Column — 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
In addition to standard column widths that are multiples of 1/12, there are also 20%, 40%, 60%, 80% and auto-width values.
To set a column style (background, border, shadow), place the Wrapper component inside the column and set its style.
Column — 1/4
Column — 1/2
Column — 1/4
Column — 1/3
Column — 1/3
Column — 1/6
1/12
1/12
Column — 20%
Column — 20%
Column — 20%
Column — 40%
Enable Minimum Height option allows you to force a height greater than content height.
You can set the height of the entire row or a separate column.
Gap between the columns
You can adjust the gap between the columns.
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Column — 1/4
Content vertical placement
There are 4 options for content vertical placement inside columns:
Top
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Center
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Bottom
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Stretch
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Content horizontal placement
This option is relevant when the total columns width is less than the row width. There are 4 options for content horizontal placement:
Left
Column — 1/4
Column — 1/4
Column — 1/4
Center
Column — 1/4
Column — 1/4
Column — 1/4
Right
Column — 1/4
Column — 1/4
Column — 1/4
Justify
Column — 1/4
Column — 1/4
Column — 1/4
Stretch horizontaly
It is possible to take a row outside the section container. The row can be stretched to the left or right edge or both edges of the screen.
This is custom heading element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is custom heading element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is custom heading element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Auto-Width Columns
If you do not want to rigidly attach content to the grid but want to get the grid components features (vertical alignment, adaptability, gaps), use auto-width columns.
Column 1 — Width: auto
Lorem ipsum
Column 2 — Width: auto
Lorem ipsum dolor sit amet
Column 3 — Width: auto
Lorem ipsum dolor sit amet, consectetur
Column 1 — Width: auto
Lorem ipsum
Column 2 — Width: auto
Lorem ipsum dolor sit amet
Column 3 — Width: auto
Lorem ipsum dolor sit amet, consectetur
Column 1 — Width: auto
Lorem ipsum
Column 2 — Width: auto
Lorem ipsum dolor sit amet