Responsive grids shouldn’t require dozens of media queries and customized CSS overrides. However till lately, that’s precisely what maximum web page developers demanded. Divi 5’s CSS Grid framework adjustments that, giving you layouts that adapt fluidly throughout display screen sizes with out requiring a unmarried line of code. Whether or not you’re development a easy card grid or a posh bento format, you’ll be able to create responsive designs that paintings fantastically on each and every tool, all from the visible editor.

Grid is certainly one of a number of format programs that make Divi 5 probably the most robust option to construct WordPress websites. Let’s see precisely what you’ll be able to do with it.

How To Construct A Responsive Grid

The primary a part of that is developing your Grid Structure on the base breakpoint (so, for Divi, on Desktop). We’ll use a Loop to create 8 other grid pieces, however you’ll be able to use one thing else, too. In spite of everything, we’ll accomplish that grid:

And listed below are this grid’s pill and cellular perspectives (left and proper, respectively).

Step 1. Atmosphere Up Your Web page

Get started through including a brand new Segment with a unmarried Flex Row.

Configure the Row’s sizing to have those width values:

• Width: 90%
• Max Width: 1300px

This constrains your grid to a targeted container. Depart the Column’s sizing at its defaults — after we transfer the row to grid format, it is going to be managed totally through the Row’s Grid settings.

After all, allow the Loop Builder at the Column to create 8 looped circumstances. Every looped Column turns into a grid merchandise. Design your loop alternatively works for you, or attempt to emulate the instance we’re operating with. For extra main points on configuring Loop Builder queries, see All Divi 5 Loop Builder Query Options Explained.

With those grid pieces created, we will now customise our Grid settings to make it optimally responsive.

Step 2. Construction The Elementary Grid Good judgment

We’ll create our grid format at the Row container the usage of Equivalent Width Column and atmosphere the Selection of Columns to 4. For now, the whole lot else remains on default settings.

For the sake of this educational, I’ll upload modules and dynamic content material to my column in order that it displays my publish content material on this loop. The loop and the styling don’t seem to be the purpose of this educational. Every card makes use of Flexbox for its inside format—if you wish to be informed extra about operating with Flex in Divi 5, see 5 Pitfalls To Avoid When Switching To Divi 5’s Flexbox Layout System.

Step 3. Set Grid Column Density At Primary Breakpoints

On desktop, the grid has 4 columns, however we wish to give each and every grid merchandise a little bit more room on smaller monitors. To do this, we can use a easy 4 → 3 → 2 column curve from the bottom tool down.

To succeed in this, click on the Row that accommodates the looped Column pieces. Then navigate during the Design Tab > Structure > Grid. Make certain Column Widths is ready to Equivalent Width Columns. To make this straightforward, open the Responsive Editor for Quantity Of Columns. This allows you to simply set 4 columns on Desktop, 3 on Pill, and 2 on Cellular.

This loosens the grid on smaller monitors and makes viewing the content material in each and every grid merchandise more uncomplicated. That is most certainly the most important piece to creating your grids responsive and is amazingly simple.

Step 4. Alter Grid Spacing

At this level, we will additionally arrange some wanted hole values and use a Horizontal Hole of 0.75rem and a Vertical Hole of .75rem. Should you ever really feel {that a} grid is just too tight or free, you’ll be able to set other grid hole values at other breakpoints, as we did with selection of columns.

Gaps care for spacing between grid pieces all over the entire grid. That is a lot most well-liked over atmosphere left/proper margin on person grid pieces.

Step 5. Create Bento Grid Offsets

A bento grid makes use of numerous merchandise spans to create visible passion. You’ll use nth-pattern laws to make particular grid pieces span two columns or two rows. Those laws repeat each and every 8 pieces, so the sample scales seamlessly whether or not you could have 8, 16, or 24 grid pieces.

Since we’re operating with a selected instance, we all know precisely what we want and will rely the grid pieces and notice which of them want the span changes. From the instance screenshot above, I’ve famous that we wish to alter pieces 3, 5, 6, and eight.

Now, pass during the Design Tab > Structure > Grid > Grid Offset Laws. You are going to upload 4 laws:

• Customized nth-Kid Rule: 8n+3 | Offset Rule: Row Span | Offset Price: 2
• Customized nth-Kid Rule: 8n+5 | Offset Rule: Column Span | Offset Price: 2
• Customized nth-Kid Rule: 8n+6 | Offset Rule: Row Span | Offset Price: 2
• Customized nth-Kid Rule: 8n+8 | Offset Rule: Column Span | Offset Price: 2

The nth-pattern laws (like 8n+3) make a selection each and every eighth merchandise ranging from a selected place, so the bento sample repeats constantly, regardless of what number of grid pieces you upload. So, for those who simply have 8 grid pieces, 8n+3 will make a selection the third. However you probably have 16 grid pieces, then 8n+3 will make a selection the third and eleventh.

Now, chances are you’ll realize “empty areas” on your grid at other breakpoints. Relying on whether or not you could have default breakpoint values set, you most probably will see an opening on cellular. There’s a distinctive grid atmosphere that solves this. Beneath Grid Density, make a selection the second one icon for Auto.

Now, even with customized offset laws developing an asymmetrical grid, we’re the usage of local CSS Grid tooling that is helping us keep responsive and feature our grid taking a look excellent it doesn’t matter what.

And actually, this is it. Divi makes it actually simple to create even a quite complicated grid. Now you’ll be able to transfer directly to the following phase of your web page and get that a lot nearer to hitting put up.

Different Divi Options For Mastering Grid Responsiveness

Now that you just’ve constructed a responsive grid the usage of a Row container, listed below are a couple of extra ways value exploring. Grid isn’t restricted to Rows—you’ll be able to apply it to Sections, Columns, Teams, and modules like Gallery and Portfolio.

Transfer To Handbook Mode For Complicated Keep watch over

If you understand CSS Grid, your talents switch without delay to Divi. Transfer to Handbook Width Columns and write grid templates like 1fr 1fr 1fr 1fr or repeat(auto-fit, minmax(300px, 1fr)). Should you don’t know CSS Grid syntax but, no downside—maximum the whole lot is achievable during the Design tab choices we’ve already coated. Divi’s reinforce for Advanced Units way you’ll be able to use refined CSS on every occasion you’re able.

Mix Grid And Flexbox

Grid and Flexbox resolve other issues, and Divi 5 allows you to use each in combination. In our bento grid, the Row makes use of Grid to regulate the entire card placement and responsiveness throughout breakpoints.

Every person card (constructed at the Column container) makes use of Flexbox to maintain the inner format—centering textual content, spacing photographs, or aligning buttons.

Grid handles the macro construction. Flexbox handles the micro main points. This mixture offers you actually nice keep an eye on at each and every stage.

Use Hole As an alternative Of Margin

In Step 4, we set Horizontal and Vertical Gaps to care for constant spacing all over the grid. Gaps are awesome to margin as a result of they simply follow *between* grid pieces—no longer at the outer edges—they usually keep constant regardless of how your grid reflows throughout breakpoints. If you want distinctive spacing for a selected card, you’ll be able to nonetheless follow margin or padding, however get started with gaps as your basis.

Customise Your Breakpoints

Divi 5 lets you outline customized breakpoints, quite than being locked into usual desktop/pill/cellular widths. Alter your grid columns, gaps, and offsets on the precise viewport widths the place your design wishes to switch. See Customizable Responsive Breakpoints for main points.

Construct Responsive Web sites In Divi 5 Lately

You simply constructed a responsive bento grid in mins—no customized CSS, no media question debugging, simply visible controls that paintings. This similar workflow applies constantly throughout quite a lot of platforms, together with portfolio grids, product showcases, weblog layouts, and touchdown web page sections. As soon as you know Grid, you’ll be able to design whole websites quicker than you ever may ahead of.

Many WordPress websites are already operating on Divi 5. Should you haven’t made the transfer but, there’s by no means been a greater time. Obtain it now and notice how a lot quicker you’ll be able to construct.

The publish How To Master Grid Responsiveness In Divi 5 gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more