For a recent client we wanted to have a WP Grid Builder grid resize when something changes in the page layout

The scenario was that we had facets in a left hand column, with a small “toggle filters” button above. When that button is clicked the sidebar of facets appeared. We’re using Divi 5 Interactivity feature for handling this layout change.

WP Grid Builder has the capability of resizing it’s grid based on any layout changes on the page but it requires a small bit of JavaScript code in order to work correctly.

addEventListener( 'click', function( event ) {

    if ( ! event.target.closest( '.et-interaction-trigger-3a272ur8i3') ) {
        return;
    }

    if ( ! WP_Grid_Builder ) {
        return;
    }

    var instances = WP_Grid_Builder.instances;

    requestAnimationFrame( () => {

        for ( var id in instances ) {

            instance = instances[ id ];
            instance.grid && instance.grid.layout();
            instance.carousel && instance.carousel.resize();

        }
    } );
}, true );

What this does is detect a click on a button that has a class of et-interaction-trigger-3a272ur8i3 it then grabs all instances of grids on the page and uses either layout or resize, depending on if the grid is a grid or a carousel.