Docs

The Grid Container Element

  • Updated:

The Grid Container is a new element added in Total 5.2 which will allow you to easily create grids with various builder elements without having to create rows and columns. This element is great when adding a grid of elements inside a column so you don’t have to make use of inner rows and columns as well as it uses modern CSS grid styles so by default any elements added inside a grid container will have the same height as well as it makes use of the mobile-first theme classes so you can easily adjust the grid columns to best fit your needs and look good on all devices.

Step 1: Insert a Grid Container

To get started simply search for and insert the Grid Container element anywhere on a page.

Step 2: Insert items inside the Grid Container

Once the Grid Container is added to the page you should see a gray plus icon you can click on to add elements inside the Grid container.

Notice how only certain elements are available for use in the Grid container? This is to keep things slimmer as there are elements you would never need inside a grid, for example you aren’t going to insert a grid inside a grid. Now, if you need to include support for specific elements not allowed by default you can use the “vcex_grid_container_allowed_elements” filter which returns a comma separated string of elements allowed in the Grid Container (see total-theme-core/inc/wpbakery/map/vcex-grid-container.php).

Step 3: Adjust the Grid Container settings

Now that you’ve created the Grid Container and added some items you’ll want to adjust the element settings so you can choose your desired columns, alignment, gap, etc.

Hover over your grid container and click on the pencil icon to access the element settings.

Back To Top