Introducing the CSS Grid Editor for Divi 5

I am excited to announce the new CSS Grid Editor for Divi 5!

Divi 5 embraces CSS Grid. It comes with tons of flexible grid templates and all the options you could ever need to build every grid layout imaginable.

Today, we are taking things a step further by introducing an interface for visualizing, editing, and building advanced CSS grid layouts. It’s awesome!

Whether you’re new to CSS Grid or an experienced developer, you can use the new interface to build stunning layouts without getting lost in a maze of settings.

Furthermore, thanks to Divi 5’s unique grid offset editor, layouts built with the grid editor are housed entirely within the container, which means you don’t have to worry about editing child elements, and every CSS Grid layout built with Divi 5 works with loops.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

The New Grid Editor

When adding a container, you’ll notice a new “Build Custom Grid” option along with Divi’s premade structure templates. Additionally, whenever you set an element’s layout style to grid, you find a new “Open Grid Editor” button in the settings panel. These buttons launch the new grid editor, which lets you build new layouts and edit existing ones.

The grid editor is super informative, distilling the container’s modified grid settings and offset rules into a visual interface you can easily understand and work with.

Building Custom Grid Layouts

In the grid editor, you can configure the base grid template and then resize and reposition items on the grid.

1. Drag To Resize Items – Each item has draggable anchors on its four corners, which you can use to resize an item to span additional rows and columns.
2. Drop & Drop To Reposition Items – You can drag and drop items from one cell to another to reposition them on the grid.
3. Drag To Adjust Gaps – Horizontal and vertical gaps are easily adjustable. Type in a specific value, or drag to adjust the gaps visually.
4. Drag To Adjust Column And Row Widths – You can build your own grid templates by dragging to adjust the width and height of each row and column.
5. Add Grid Items For Better Visualization – You can add as many grid items as you want, letting you visualize long, complex designs in the editor, even if the container has no child items.
6. Visualize and Edit Grid Offset Rules – The grid editor highlights each offset rule, and you can see which items the offset rule affects.

Editing Existing Layouts & Visualizing Advanced Offset Rules

The grid editor is a great way to visualize an existing layout instead of trying to make sense of modified grid settings in the settings panel. It’s also a great way to edit any of Divi’s premade structure templates. Pick a premade template, and then open the grid editor to customize it. Easy!

The Beauty Of Loops And Container-Based Grids

Divi 5’s grid editor is unique because it stores the layout within the container and targets items within the grid using pseudoclasses. That means when you resize and reposition items in the grid, the child items themselves are not affected; Divi’s grids are child element agnostic!

Once you build a grid at the container level, you can add, delete, duplicate, and loop child items, and everything falls into place.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have You Tried Divi 5’s New Variable Fonts?

We just recently released variable fonts for Divi 5.

Divi 5 now supports the latest Google Fonts collection, including variable fonts and the dozens of new controls they provide. If you aren’t familiar with variable fonts, keep reading because they are amazing.

We also added many new text styling options that allow you to create magazine-style text layouts, style dropcaps, and give you more control over text stroke, spacing, and more. When it comes to typography, Divi 5 now has it all.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, 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. 😁