Grid & Columns

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.

WordPress
WordPress

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.

WordPress

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