Divi 5 relies on native CSS flexbox to allow you much better control in building custom layouts. The Columns Class option allows you to choose the size of each column when the Row's layout is Flex (Flexbox).
The Column Class option comes in handy, especially when you build custom layouts that are outside the default column structure that Divi 5 provides out of the box, and in combination with Layout Direction and Layout Wrapping options, it gives you the freedom that was lacking in the block-based layouts.
Column Class Location
You can find the Column Class option by opening the Column settings → Design Tab → Sizing.
Note: The Column Class option is only avaiable for the Columns.
Column Class Purpose
It allows you to define the size of a column on a 24-column grid system.
Column Class Usage
Commonly used in responsive layouts to redefine column widths and control how many columns appear per row at different breakpoints.
Column Class Use Case
For example, let's assume that on a desktop, a Row has 8 equal columns. However, on the Tablet viewport, you need to display 4 equal columns, and on the Phone viewport, you need to display all 8 columns stacked on top of each other.
Use case 1: Using the Change Column Structure action (easy)
Switch to Tablet view.
Click on the Change Column Structure action icon
.Choose the 4-column layout.
Edit the Row's settings and go to the Design tab → Layout → Layout Wrapping and enable the Wrap option
.Switch to Phone view.
Click on the Change Column Structure action icon
.Choose the 1-column layout.
In this use case, the Column Class of each column will be set automatically for you as follows:
Desktop: Each column will have the Column Class set to 1/8.
Tablet: Each column will have the Column Class set to 1/4.
Phone: Each column will have the Column Class set to 1/1 (fullwidth).
Use case 2: Using the Column Class option (advanced)
Add a Row and choose an 8-column equal layout.
Switch to Tablet viewport.
Edit each of the columns and go to the Design tab → Sizing → Column Class.
Choose the 1/4 option.
Edit the Row's settings and go to the Design tab → Layout → Layout Wrapping and enable the Wrap option
.Switch to the Phone viewport.
Edit each of the columns and go to the Design tab → Sizing → Column Class.
Choose the Fullwidth option.
The result will be:
Desktop: 8 columns (side-by-side)
Tablet: 2 rows of 4 columns each (side-by-side)
Phone: All 8 columns are stacking on top of each other.
