5 Best Kadence Blocks Grid Features (+ Templates!)

You may have heard the news… Kadence Blocks 3.0 is hot off the press, and it brings some incredible features that make building pages and blog posts in WordPress easier than ever.

One of my favorite new features with Kadence Blocks 3.0 is that the Row Layout block now takes advantage of CSS Grid.

What does this mean? CSS Grid is a two-dimensional grid system that drastically changes how we create various page layouts and better web designs.

Previously in Kadence Blocks v2, it used Flexbox for everything.

That was great, but Flexbox is only really good at one-dimensional layouts.

So, say you wanted to create a 3×2 grid on your page with three columns and two rows.

With Kadence Blocks v2, you would have needed to create two separate Row Layouts to achieve that layout.

The first Row Layout would be your first three columns and top row, and then the second Row Layout would be the three columns in your second row.

See what I mean? Pretty one-dimensional.

This caused some issues:

• Multiple Row Layouts to maintain, each with their own settings
• Inconsistent column and row gutter values (space between columns and rows)
• Larger DOM size (more elements being used than necessary)
• Unable to swap sections back and forth (you’d have to copy and paste elements)

Using CSS Grid takes care of these issues. You can use a single grid to achieve a multi-dimensional layout (multiple columns and rows).

But here’s where things really start to get spicy… you can use CSS Grid for your page layout, and each grid item can be a Flexbox container. 😱

Now that’s hot. 🔥

CSS Grid and Flexbox can work great together.

While other Gutenberg block plugins have been attempting to mimic Kadence Blocks (because it is the #1 block plugin in WordPress) and use Flexbox for everything… Kadence said, “Hold my beer,” and decided to one-up everyone.

Now, they’re a mile ahead of the competition yet again.

And CSS Grid is only one of the dozens of new features introduced with Kadence Blocks 3.0.

Now that I’ve introduced CSS Grid, let’s review the 5 best Kadence Blocks grid features that make building pages with the WordPress block editor even better.

Kadence Blocks Grid Templates

Before I get into all of the best Kadence Blocks grid features, you can see all of these features in full effect with all of our feature grid templates we’ve built in Start Blogging Blocks.

Start Blogging Blocks are predesigned templates built 100% with the Kadence Blocks plugin.

Various grid layouts (2×2, 3×3, 4×4, 3×2, 4×2) allow you to achieve any layout you’d like.

Two feature grid templates are 100% free to get you started, and you can sign up for a free license here.

1. Add Sections With a Click

The new Kadence Row Layout block that uses CSS grid opens up a world of possibilities for building pages quicker and easier.

You can now add sections very quickly to the Row Layout.

Say you create three content boxes using a Row Layout with three columns as shown before.

What if you want to create another row of content boxes so that you have six (three columns with two rows)?

Before Kadence Blocks 3.0, you would have to add another three-column Row Layout below the first one, which adds unnecessary elements and makes for more work.

Now, all you have to do to add a section is go to the Row Layout level and click the ‘Add Another Section‘ button in the toolbar to easily add a new section.

Click that ‘+‘ button three times, and you will have an entire new row of sections without needing to add another Row Layout.

You can then use the Copy/Paste Styles feature at the Section level to quickly give your three new sections the same style as your first row.

Then, if you copy the section content and paste it into the three new sections, you now have six full content boxes in no time.

The ability to add a section with the click of a button leads to the next best Kadence Blocks grid feature…

2. Easily Swap Sections

One of the coolest new features of the new Row Layout block using CSS grid is that you can very easily swap sections in your grid with the click of a button.

One big pain point prior to Kadence Blocks version 3.0 was that if you wanted to swap two sections of content, you would have to copy all the content and paste it into the next one. This wasn’t very beginner-friendly.

Now, if you want to swap the position of a section, it’s unbelievably easy.

Referring back to the six content boxes from before, what if we want to swap the position of the second section in our grid?

All you have to do is select the second Section block and then click the arrow in the toolbar to move it in whichever direction you want.

It’s that easy.

This feature alone will save you so many hours when building new pages.

3. Additional Layout Options

At the beginning of this post, I talked about how the old Kadence Blocks v2 used Flexbox for everything.

The problem with this is that Flexbox is good at one-dimensional layouts and isn’t the best at multi-dimensional layouts (multiple columns and rows).

With Kadence Blocks 3.0 using CSS Grid, we have several new layout options for various screen sizes, making our layouts even more flexible and mobile-friendly.

Let’s use a new example of six content boxes with star ratings inside them.

This is one of the many feature grid templates we’ve built in Start Blogging Blocks that you can use to save hundreds of hours building websites.

In Kadence Blocks v2, before CSS Grid was implemented, this type of layout didn’t look the greatest in tablet view.

Why? Because the three columns in each row would squish together, which looked like this:

This looks okay, but it’s not great. Ideally, what if we could turn this 3×2 grid into a 2×3 grid with two columns and three rows to give these content boxes more breathing room?

With Kadence blocks 3.0 using CSS Grid, this is now possible, along with many more layout options.

In the WordPress block editor, we select the top-level Kadence Row Layout, then switch to tablet view.

Here, you can see several new layout options thanks to CSS Grid. Choosing the “Two Column Grid” option changed our layout from a 3×2 grid to a 2×3 grid, giving our content boxes much more breathing room and making our design much more mobile-friendly.

How nice is that? 😎

4. Column and Row Gutter Variable Spacing

The next Kadence grid feature worth mentioning is the new variable spacing used for column and row gutters.

Since all the sections live inside a single grid now (rather than multiple Row Layouts), you can control both the column and row gutter from a single Row Layout.

The column gutter controls the horizontal spacing between each column, and the row gutter controls the vertical spacing between each row.

With your top-level Row Layout chosen, you can see the Column Gutter and Row Gutter options in the Layout tab.

Keep in mind, the Row Gutter option will only show up if you have more than one row.

Notice the variable spacing options available – None, Small, Medium, Large, or Custom, where you can specify your own value.

The Column and Row Gutter’s new variable spacing options are excellent because they bring consistency between each section (horizontally and vertically).

You can also increase or decrease the spacing between sections with a couple of clicks without manually typing in spacing values.

Before Kadence Blocks 3.0, when you used to have to create multiple Row Layouts, it was difficult to keep the horizontal and vertical spacing consistent between sections.

Now, it’s all packaged into friendly variable spacing options that follow the best design principles.

5. Reduced DOM Size

Last but not least, one of my favorite Kadence Blocks 3.0 grid features is the reduced DOM (Document Object Model) size that comes with using CSS grid.

For those that don’t know, the DOM is the data representation of all the elements that make up a webpage.

Using heavy third-party page builders to build pages in WordPress leads to massive DOM sizes, which can slow down the rendering of your pages.

Kadence Blocks is one of the most lightweight plugins you can use to build pages directly using the WordPress block editor, which is one primary reason your site will be much faster.

With Kadence Blocks 3.0, it became even more lightweight (as if it wasn’t already fast enough).

Let’s take our six content boxes from before.

Before Kadence Blocks 3.0, you had to use multiple Row Layout blocks to achieve a 3×2 grid, as shown below.

You can see with the Document Overview toolbar open, the old way of building this layout was four levels deep and required multiple Row Layouts.

Now that Kadence Blocks uses CSS Grid, all those sections can live inside a single Row Layout grid, requiring fewer elements to build the same layout.

The new way using CSS Grid is only two levels deep versus four levels deep before the update.

I’m always a fan of tools that allow you to create more complex designs with fewer elements, and Kadence Blocks is the perfect tool to do just that.

---

So, there you have it! The 5 best grid features in Kadence Blocks 3.0 that help make it the best Gutenberg extension plugin on the market.

What do you think of Kadence Blocks using CSS Grid? Are there any features you wish Kadence blocks had? Let me know in the comments below! 👇

Until next time,
Jake ✌️