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.
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
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.
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.
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.
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.
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.
17 thoughts on “Introducing the Advanced Columns & Grid Block”
Nice work Stackable team! The new columns are a game changer!! Mic drop….
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.
Thanks for your suggestion! I’ll add your suggestion to our list and see what we can do about this in the future. 😊
This is an awesome enhancement. This product gets better and better.
Glad to know that you liked our new added block. Thank you for your support! ❤
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.
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.
is it possible to have 4 columns on desktop and 2 columns on mobile ?
Not yet, currently our columns would always collapse into a single column in mobile.
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 🙂
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 😉
Hi, is it possible to set 7 columns? I can add a maximum of 6
In version 3 of Stackable, there won’t be a limit anymore on the number of columns you can have.
Hi ， is it possible to set 2 columns side by side in mobile view like this ? https://ibb.co/FsWhfqM
Instead, it’s now like this .https://ibb.co/DDz2SQz
Hi Sinja! Yes, it’s possible to set 2 columns side by side in mobile view. You can do this by previewing in mobile, then resize the columns you want side by side to 50% width. Here’s a link to our documentation for your reference. https://docs.wpstackable.com/article/469-how-to-collapse-columns-in-tablet-and-mobile
Let us know if you have any more questions!