This is a big one. We built the best CSS Grid builder, and it’s available for Divi 5 today. It’s better than Elementor 🙉. It’s better than Bricks 🙈. Whether you want to master the grid or simply use Divi’s new grid templates, you will love this update.
Check out the following video to see the new feature in action. 👇
CSS Grid For Everyone
Divi 5 is a far cry from its predecessor. We have been turning Divi into a web design powerhouse, with new features like Flexbox, Advanced Units, Presets, and Design Variables. CSS Grid is the next big step forward.
At the same time, we don’t want existing users to feel lost or buried in new settings. We struck the right balance between giving advanced users the necessary tools while making grid layouts accessible to beginners.
Grid Templates For Every Occasion
If you have never heard of CSS Grid and have no desire to learn the ins and outs of grid layouts, don’t worry—you don’t need to. Enjoy the new pre-built grid templates!
The beauty of using grid templates is that the grid is controlled at the container level, and as you add new items, they conform to the grid automatically. It’s much more intuitive and unlocks a new variety of designs.
Divi has grid templates for every situation, and applying them to existing content is easy.
Complete Control for Grid Experts
If you are a seasoned CSS Grid expert, Divi’s grid options don’t hold you back. You can get straight to the point, manually define your column and row grid templates, and create varied grid layouts using offset editing, which I will touch on later.
Of course, you can forgo the interface and apply grid rules using the Custom CSS panel, too; whatever works best for you.
Intuitive Grid Options For Web Assemblers
If you are somewhere in between, then Divi 5’s grid builder really shines.
We transformed CSS Grid parameters into settings to create vertical or horizontal grids, customize column and row dimensions, grid direction, element alignment and justification, and more.
Additionally, the sizing option group includes new column and row options that allow you to adjust an individual grid item’s width, height, and position in the grid.
Grid Offset Editing
One of Divi 5’s grid builder’s most unique aspects is the offset editor, which you can use to create repeating non-symmetrical grid patterns at the container level. Let me give you a real-world example.
I created a blog template in the video below using Divi 5’s Loop Builder; each column is a loop item filled with dynamic content. When I enable the grid layout style on the parent container, the columns automatically conform to the grid.
I can adjust the number of columns, enter custom column or row patterns, change the gap sizes, and do many other things.
In addition, I can use the offset editor to apply rules to specific items in the grid.
Instead of a standard column pattern that repeats on each row, I can create offset patterns by, for example, having every 4th item span two columns, starting at the second and third item. These offset patterns give Divi 5’s pre-built row templates so much variety.
CSS Grid Demos (Free Download)
You can create spectacular layouts using CSS Grid that were never possible before. If you want inspiration, look at these stunning layouts our design team created using the latest version of Divi 5.
You can download them for free and test them out yourself.
Try Divi 5 Today
CSS Grid for Divi 5 is available today and is one of many features coming to Divi this year.
You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.
As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.
We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.
Have You Tried Custom Attributes For Divi 5?
In case you missed it, we recently released the new Custom Attributes, which allow you to add any attribute, such as alt, title, rel, and aria-label, to elements and most sub-elements.
Divi has had support for specific attributes, such as class and ID, but now you can add any attribute to any element. This is especially important for accessibility, allowing you to, for example, add alt text to images, and roles and labels to non-semantic elements like an icon-based button.
Watch this video for all the details. 👇
More Divi 5 Updates Are On The Way
2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.
If you’re here for the Divi comeback, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁
Leave A Reply