Introducing the Advanced Columns & Grid Block

Introducing the Advanced Columns & Grid Block

This update adds one of the most requested blocks to Stackable: the Advanced Columns & Grid Block. This increases our library to 24 amazing blocks. Update to version 2.4.0 now!

A Super Improved Native Columns Block

Think of Stackable’s new Columns block as a super improved version of the native columns block. We’ve increased the capabilities of the columns block, making it into an essential block for building layouts.

Let me go through every aspect on why we’re excited about this new block addition.

Very Easy Column Widths

In the native columns block and in other blocks you may have come across with, in order to modify the widths of your columns, you would have to go through every “Column” block and change the individual widths. In some cases, you can drag the columns to resize them but you won’t be able to precisely control their widths.

In Stackable’s Advanced Columns & Grid block, we’ve added in a single column width slider control that you can drag to adjust all your columns easily. We’ve also added in some pre-set column width buttons, and a reset button to make things even simpler.

Responsive Columns

You can even set different column widths for when your page is viewed in tablet-sized devices. So you can make sure that your content won’t look squished in small screens.

On mobile screens, your columns would collapse and stack on top of each other.

Height and Vertical Align

To help with building your page layouts, we’ve added in height controls and vertical alignment controls.

You can set your columns to be of half-screen or full-screen height. Or you can also set your own custom height in px or vh units.

You can also set the columns to occupy the whole column height, or compress to the top, middle or bottom. This is very helpful when you have columns with backgrounds to achieve some nice effects.

Text Colors

We also provide you the ability to change all the colors of your headings, normal text and links of your content inside your columns.

You can also do this on a per-column basis if you’re designing your columns to have different colored backgrounds.

Block Settings

The Advanced Columns & Grid Block also supports Stackable’s common block style settings such as Block Background, Block Title, Block Description, and Top and Bottom Separators.

This means that you can turn your columns into entire sections in your page with a single toggle.

Individual Column Controls

Every column has 2 available layouts: basic and plain. Basic gives you a container with a background, and the plain layout just displays the content without any paddings or backgrounds.

Each column has their own set of options where you can adjust the size and location of your content and whether they’re placed on the top, middle, or bottom of your column.

Premium Features

So far, what we’ve shown you are all free features of the Advanced Columns & Grid Block.

While the above features are quite powerful and flexible, we have some great things in store for Premium users.

More Columns Layouts

Aside from Grid and Plain layouts, Premium provides you with 3 more layouts: Uneven, Uneven 2 and Tiled:

Column Gap and Row Gap

Premium users would have the ability to change the distance between the columns with the Column Gap option. For layouts that span multiple rows, we also have a Row Gap option.

Easily Switch Columns Around

There are times that you may want to swap or switch columns around. In Premium, we give you an easy way to move columns without the need to move individual blocks around.

Advanced Responsive Controls

Lastly, Premium gives you advanced responsive controls for controlling the arrangement of your columns when they’re stacked on top of each other in mobile screens. You can also adjust the Row Gap when they’re stacked.

Conclusion

The Advanced Columns & Grid Block is quite a useful and robust block. Check out the block’s demo page to see what it can do in action. There’s also a link to the live demo in there if you want to try it out for yourselves.

Was this article helpful?

5 thoughts on “Introducing the Advanced Columns & Grid Block

  1. Hello Stackable,

    been using a lot of Gutenberg plugins and your plugin have some very interesting features.

    A thought. The Uneven, Uneven 2 and Tiled layout looks really great. Could these also be applied to post grids?

    Thanks for a great block plugin.

    David

    1. Hi David,
      Thanks for your suggestion! I’ll add your suggestion to our list and see what we can do about this in the future. 😊

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.