Introducing the Advanced Columns & Grid Block

Introducing the Advanced Columns & Grid Block

Last Updated on April 17, 2020

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.

19 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. 😊

  2. I really like the 4 column look on desktop, but once published to mobile it ends up so small that it is nearly illegible. I guess you just need to pick and choose the best time for implementation.

    1. When on mobile, the columns should stack and take the whole width of your mobile (depending on if you’ve set a value for the Max. Content Width).

      Would you be able to send us a screenshot of what you are seeing? You can email us directly at support@stackable. com.

  3. I’m using Stackable Pro and loving it 🙂

    One suggestion for the Advanced Columns & Grid Block: Make it possible to define, that columns should already be stacked for tablets, not only mobile. Or even better: Let us define the pixel width, when the layout should stack. Most of the time it’s simply not useful to have columns on tablets (or not worth the time to make the content legible).

    This would be a serious simplification and improvement 🙂

    1. Hey Michael!

      Thanks for bringing this up! We agree with you, this will definitely improve the workflow when building on both tablet and mobile! Don’t worry, we definitely took note of this and are improving our responsiveness settings for Version 3. So keep an eye out for that 😉

  4. Hi, how do I set the max content width to the entire website? I have been searching everywhere but not able to find the option in the free version. Also as a work around I tried setting the max width to each and every column that I have in the website but it reverts to default every time I edit the page.
    I am using the 2023 theme. Is this issue happening because of the theme?

    1. Hi Ronnie! You can set a max content width to the Columns block by going to the Stackable settings (from your WP Dashboard, Settings > Stackable). In the Editor Settings section, you will find two settings called “Nested Block Width” and “Nested Wide Block Width”. The setting you will enter a value to depends on the option you’ve selected for the Columns block.

      As an example, if your Columns blocks are set to “Align Wide” for the Content Width, you will enter a value for the “Nested Wide Block Width” setting. Let me know if this was helpful. If not, you can send an email at support@wpstackable.com so we can discuss this in further detail.

Leave a Reply to Yssa Neo Cancel 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.