Grid & Columns

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.

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.

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.

You can adjust the gap between the columns.

There are 4 options for content vertical placement inside columns:

This option is relevant when the total columns width is less than the row width. There are 4 options for content horizontal placement:

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.

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.