This is a big one. We built the best CSS Grid builder, and it’s available for Divi 5 today. 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. 😁
What are your plans for the Divi Builder Plugin?
I have to say this might be my favourite addition to Divi 5 so far – well done, it’s really cool and once you get your head around it it works so well, I’ve gone back and redesigned a few sections on a site I’m working on. Before I was using nested rows etc (which don’t get me wrong still worked very well and nested rows is a gamechanger too) but the grid system now makes it soooo much easier and just streamlines the look of wireframes etc, so much easier – great job!!!
Awesome, I’m looking forward to this customization. I recently had a bit of trouble with rows. As I was used to in Elementor, I needed 20%, 30%, 20%, and 30%. I couldn’t do it in Divi 4. I see that in Divi 5 this will be relatively easier.
Looks promising. Many many options and good to see the equal minimum widths for automatic griding. I will add that it will take a while to get our heads around the gridding options, but again we are starting to see a lot of this functionality buried many clicks deep into UI. Grand if you are a casual user, but workflows grow very long when all the clicking and targeting of settings adds up.
It’s a mute point wehter it’s better than Bricks, considering that Bricks and Etch are more pitched to those wroking in a more HTML/CSS based environment. In addition we can’t redesignate element tags in a correct semantic manner to a listing format for ordered and unorderes lists so that the containing grid element is ol/ul and the internal layout items are li.
Of more interest at the moment is where wer are going with older Divi 4 sites that potentialy still need maintanence and don’t fair well with the migration process. The concern is that these will eventually break, either by being forced into migration to Divi 5 or with conflicts relating to WordPress updates. In this light, would love to see a post from Nick outlining some of the areas that are being tackeled to reslove some of the hurdles. I have tested many sites, some pass with flying colours, others with some remedial interventions and others that would need a lot of work.
For example the migration parser will occassionaly mangle the shortcodes of third party plugins. While generally these can be fixed, it says a loot about the migration process sticking to its own lane and concentrating on its own et- basesed shrotcodes. We need to see Elegant themes make some sort of statement on the roadmap for these older sites. Even a mininal maintained Divi 4 for a long time to come would be welecome.
Wow! Great work
Great work everyone! Y’all are killing it.
Hey Team!
Where can I find hte documentation on this Divi 5 CSS-Grid?
Mike
Hey, Mike!
Here’s our article on the topic: Understanding Divi’s CSS Grid Layout. Hope it helps!