Flexbox appeared in Divi 5 a few weeks ago, and Grid followed shortly after. Both tools determine how your content is arranged on the page, giving you two solid options for building layouts.
But how are they different? They look quite similar at first glance. This post breaks down the differences between Flexbox and Grid in Divi 5, and when you should use each. Look!
What Flexbox does in Divi 5
Flexbox is a CSS layout model that uses Divi 5 as a base. It works in one direction, meaning you can arrange things horizontally or vertically, not both at the same time.
Subscribe to our YouTube channel
This system replaces special and full-width sections. You no longer need it because Flexbox fulfills the same function with fewer restrictions. You can nest a row in a column and nest another row within it. You can nest rows within columns, with multiple levels of nesting.
The main advantage is control. You can adjust the spacing between elements, change how elements are aligned, and rearrange content for different screen sizes in the Visual Builder, located under your Layout menu.
Eliminates the need to write CSS for basic positioning tasks, saving time and making layouts more accessible to build.
How to use Flexbox in Divi 5
Start by adding a row to your section. You’ll see options for equal columns, multi-row layouts, or multi-column layouts. Select one and add your modules to the columns as you normally would.
Once your modules are in place, click the settings icon in the row. Then navigate to the Design tab and find the Layout Settings. That’s where all the Flexbox controls are located.
You can convert an existing layout to Flexbox by changing the layout style here.
From here you can also adjust the layout direction to determine whether the content flows horizontally or vertically.
Justify Content takes care of the alignment and distribution. Aligning items determines how elements are placed in the row.
There are also spacing controls for horizontal and vertical gaps between columns.
If you’ve used Divi before, the process will feel familiar. The difference is that you now have more options to refine how things look without leaving the Visual Builder.
What Grid does in Divi 5
Grid is a CSS layout model that controls rows and columns simultaneously. It creates a structure with defined cells, and the content placed in it fills those cells based on the rules you set.
This system arrived in Divi 5 a few days ago. You work with it at container level. Set up your grid structure by defining the number of columns and rows needed, setting their size, and adjusting the spacing between them. Items you add flow to the grid based on that structure and create whatever layout you want.
Divi 5 comes with pre-built templates that use common grid patterns, eliminating the need for manual installation. Choose a template and your modules will automatically snap into place.
You can control where individual items are located, make specific elements span multiple columns or rows, and create repeating patterns in which certain items behave differently than others. Once you set the rules, the grid handles the placement automatically.
How to Use Grids in Divi 5
When you add a row to your section, pre-made grid templates appear next to the Flexbox options. Choose a grid template that suits your layout needs.
You can also convert existing layouts to grid from the layout style in the Design tab of your section’s settings.
You can add modules to the grid cells or adjust your grid structure. Column widths let you control how grid columns behave. Row heights work the same way, but determine vertical space.
Automatic grid columns and automatic grid rows address a specific problem: what happens when items are placed outside your defined grid structure. These settings indicate to the grid how wide or high the overflow cells should be. Without this, overflow items would have unpredictable sizes.
Collapse Empty Columns removes any column without content from your layout. The remaining columns will expand to automatically fill that space.
Column widths and row heights give you control over cell size. Set columns to equal width for uniformity, automatically sized based on content, or manually for custom CSS. Rows work the same way with automatic, equal, minimum, or fixed options.
Gap controls add spacing between cells horizontally and vertically. Grid Direction lets you adjust how content flows through the grid.
Grid direction determines how items automatically fill cells. Row fills from left to right, column fills from top to bottom. Grid Density packs items tightly to fill gaps or keeps them in natural order.
Justify Content divides the grid horizontally into the container. Aligning content does the same thing vertically. Justifying Items and Aligning Items work differently. They determine how content is arranged within individual cells, both horizontally and vertically.
Open the settings for individual items in your grid and go to the Size options group. Here you determine the width, height and position within the grid.
So, how are they different?
Both tools are in the same Layout Style dropdown and arrange your modules on the page, making them look interchangeable at first glance. However, they are built for different purposes and selecting the right one can significantly speed up your workflow.
Flexbox is a better fit for certain layout types, while Grid handles others more efficiently. Knowing which situations require each tool will help you avoid conflicts with settings that were not intended for your project.
Here’s when to use Flexbox and when to use Grid, and how to choose between the two when either might work.
When you need Flexbox in Divi 5
Flexbox in Divi 5 works best on layouts that move in one direction. You’ll also need Flexbox for button groups and navigation bars. Flexbox automatically controls when elements should flow to the next line based on the screen width. Set Layout Wrapping to Wrap and your content will be resized without any bleed issues. Mobile layouts are also getting easier.
Divi 5 lets you rearrange columns for different screen sizes using responsive controls in Visual Builder. For example, you can place your call to action first on mobile and last on desktop without duplicating the entire section or writing custom CSS.
Flexbox also fits in situations where you build gradually. Add a module, check what it looks like, add another. The layout adapts naturally as you add more content.
If you need buttons at the bottom of columns even if the text length differs, you can use Module Groups with Content Justification set to space between them. The content remains at the top and the buttons are at the bottom.
This system gives you precise control over spacing and alignment in individual rows or columns. When your layout flows in one direction and needs that kind of flexibility, Flexbox gets the job done.
When you need a grid in Divi 5
Grid in Divi 5 gives you control over rows and columns at a time. The system works at container level. Set up your structure once and the items you add will automatically fit that grid.
This works well with Loop Builder. Build a blog template, enable the grid layout style and your posts will fit into your defined grid structure. You can adjust the number of columns, set custom row patterns, and change spacing. The content is filled in based on those rules.
The offset editor allows you to create patterns where specific items behave differently. For example, every fourth item can span two columns, starting with the second item. These patterns would repeat in your layout without manual placement.
Grid also fits when you need items that span multiple cells. A featured post can span two columns, while regular posts can span one. You determine this via the size options in the settings of each item. Set the width, height, and position for individual grid items.
How to choose the right one
Choosing between Flexbox and Grid comes down to how you want your content to flow and whether you need one-way or two-way control. Here’s how to choose between them.
You can switch between Flexbox and Grid at any time in your container’s settings. Test one to see how your content behaves and adjust if necessary. Divi 5 allows you to change layout systems without losing your modules or starting over.
Try Flexbox & Grid in Divi 5 today
The Layout Style dropdown in Divi 5 offers two additional solid options: Flexbox and Grid. After you’ve built a few layouts, develop an idea of which tool is best suited for each task.
Start with what makes sense for your current project and then experiment with the other if you come across something for which it is better suited. The great thing about Divi 5 is that you can switch between the two at any time without losing your work.
#Grid #Flexbox #Divi