By default, Beaver Builder’s Loop module uses a CSS Grid layout system. While Grid works well in most cases, it can’t handle centering. This snippet converts the Loop module to use Flexbox instead of Grid, which allows posts to center properly regardless of how many are displayed. The conversion respects your existing column and gap settings inside the Loop module, so you don’t need to reconfigure anything.
How It Works
The snippet works in three parts:
PHP – Adds data attributes to Loop modules that have the flexbox-loop class. These attributes contain the column counts and gap values from your Loop settings across all breakpoints.
JavaScript – Reads the data attributes and applies them as CSS custom properties, which the CSS uses to calculate proper column widths and gaps at each breakpoint.
CSS – Converts the Loop Grid container to Flexbox and sets up responsive column calculations using CSS custom properties. It also includes a fade-in effect to prevent layout flash during initialization.
On to the Code!
Once everything below (PHP, JS, and CSS) is in place, simply add the class flexbox-loop to any Loop module where you want to use Flexbox instead of Grid.
PHP
For the PHP, add it to your child theme’s functions.php file or use a code snippets plugin.
