Columns vs. rows vs. grid – When to use which block

Hi, I’m Thomas and today I want to talk about when to use columns, rows or even the new functionality the grid option inside the group block and to give you some ideas when it is best to use whether the one solution or the another solution.

First of all we want to have a look at the most basic one, the column, because this is a quick and easy win if it not comes down to having too much control over certain breakpoint settings. For that I will jump in my back end here real quick so here we have the page and here I have the pre-built structures.

So first of all let’s talk a bit about the column. The column is as I told you a quick and easy solution when you just simply want to put some items into columns next to each other and you don’t want to mess around with too much of the responsive settings. There are obviously breakpoint depending settings but yeah they’re very straightforward in some way. For the first glance it might be a bit limiting but you can achieve quite interesting layouts still with the column block.

So first of all Greyd enhances every core block and the same we does here with the column block. On the parent container you have obviously the options to change background elements, set up an overlay, choose from one of the existing patterns or even upload your own pattern. For the parent block we have separators, animation and some advanced options as well. But the magic is behind the child blocks here.

So when we go down into the next layer here to one child block you can set specific breakpoint settings if you need to. If you don’t need to just leave it to automatically, which means the system tries to set every element next to each other to a certain breakpoint. If you need to change that you obviously can just click on the little icons and here you have your 12 column grid to change the behavior specific to a breakpoint.

The one downside when it comes to the columns block and why I personally always use the row block itself — so the row variation of a group block — is it’s not that easy to stretch each and every column to the same height. You obviously can do that through the option here in the child blocks “stretch to fill”. But what if my layout structure depends on that I use nested elements inside and use for example a custom background, whether it’s an image or a custom color? With a column it’s difficult. Therefore I use another option: the Row block.

With the Row block out of the box in vanilla block editor in vanilla WordPress you get some options. As you see here it’s just a variation of the group block and you have the possibility to allow wrapping to multiple lines when the elements inside don’t have enough space. You’re very limited sometimes, so to enhance the capabilities of the Row block and the entire group block Greyd has included some features.

Especially when it comes down to the width control. So in here I have nested a stack, just another variation of the group block. To the normal additions here with options to hide something on page load or to animate an element, we have included additional width controls. Down here you can set up for each and every group block — whether it’s row variation or stack or even grid — you have additional width controls. And you cannot only set up your own custom CSS calculation, you can use more here.

For example we have “fluid” which means you have a minimum value and a max value and the value will automatically be calculated in between. Or you just use Min of two values, Max of two values or such. In my case “custom” because here I have a personal custom CSS variable where I can change basically the layout really easy and it works in every breakpoint because these settings are breakpoint specific. The breakpoints by the way you can control completely in Greyd through the Greyd Styles. In the site editor here on the grid you have all these specific breakpoints and you can change them at any time in the project.

So let’s jump back to the block settings here and let’s have a look what we actually can do with this custom CSS snippet here and I will enlarge it a bit. For example I can just simply change the value to 50%, going to the next element here and change it as well to 50%. So I have a 50/50 column and down below the next stack will automatically be stretched because not only had I set the width properly but I can control here with the vanilla width settings to fill, to give an object the option to fill the entire space when there is no other object in the way.

So let’s just reset the setting here real quick to 33 and again 33. And I just rebuild my original structure. This as I already told you you can set up specifically for each and every breakpoint.

Down below I have a bit more of a complex structure because I need to change just my image here. I nested another row inside and here I used an image and I used a headline and a text block. I want to specifically control the width of the image over all breakpoints. Normally from an image, an image has a width and a height, but it’s a max width to be clear. Which means when the object doesn’t have enough space around them it shrinks down. If you want to control these properly just put it in a group block and again with our enhanced width controls just set a minimum width so it is specifically set that this object cannot be under 45 pixel. So we have complete control over that.

Again you can set this for any breakpoint individually. This means you have a really high flexibility when it comes to breakpoint-specific layouts inside the Row block, which means you could even build like Bento grids just relying on stacks and row. But there is another option. Let’s talk a bit about grid. Grid is the newest option or the newest variation inside the group option here, so it’s the last one and from a vanilla standpoint it’s still very limited in its settings. What you can do is obviously set the layout type to Auto and set up a minimum column width so no column can be less than 20 RM currently.

Okay, which is nice, looks nice on the screen here but this is just a minimum column width. This means you can control out of the box the max amount of columns. I did this currently using a helper class. I’ll show you in a minute. So I just want to delete the helper class real quick to show what I mean. I reload the entire screen here and now as you see I have four columns already because my screen is so wide and if I increase the screen resolution even more there will be five columns, six columns and so on. So I don’t have any control. I could obviously switch to manual mode and set it up specifically to three columns, which means on a tablet or smartphone as well there are still three columns. So yeah you don’t have control again over breakpoints because from a vanilla standpoint, the editor has one break at 600 pixels.

To get rid of this problem I included a custom helper class which I called grid Max 3. It’s obvious what it does. I switched back to Auto. In the site editor itself I did set up some additional CSS and I scroll down here and here are my helper classes. So I can toggle the most common grid layouts here. This specifically is targeted through a media query with a min width of 199 pixels, so I cover almost all standard netbooks and notebooks. What this class does is I still have a flexible minimum column width but I have a total amount of max columns over 1200 pixels.

This gives you the flexibility you want from a grid block. The grid block with these helper classes is completely usable for each and every layout and it’s really easy, especially when we’re thinking about building a website for a client later on. The client maybe wants to change the order of some boxes or include a new box into a grid like this because here you set up the width of each column on the outer block. In the other example here it’s more flexible at the end of the day but as well more complex obviously for the content creator later on, because here you have to set up the width per breakpoint inside each and every child element.

And back again to the easiest version which is the columns block. Here you can specifically target the width through each and every column, which is a child block you have to set up over and over again. So when we’re talking about easy to use solutions, if you just want to make sure that your layout is for example a three column grid and you don’t want to set anything up inside the child blocks and you want an easy and quick fix, you can use the column block. Just type in “column” and you already get a preset. In this case I want to use a 3×3, just enlarge the column to the wide width here so I can work with that. Normally by standard you can set up the breakpoint behavior: it is still three column layout until you reach the smartphone, then it will be stacked.

Alright I almost forgot another addition, a neat one through Greyd into the columns block. And that’s obviously as well a reason when to use the columns block: because we cannot only set up the width for each and every column we can as well change the stacking order. Normally from left to right everything gets stacked down below. If you want to change this to emphasize for example the middle column, you can do that by just changing the order of the column. For example it is position one on a smartphone, position one again on a tablet and on a standard notebook it will be position two, and it inherits it to every other breakpoint after that.

So that’s the last thing I want to talk about when it comes down to columns. To wrap things up: columns are a quick and easy fix if you don’t want to change anything. You can work with the 12 column grid. Here you can even set up a stacking order individually for each and every breakpoint. The row block itself is very flexible: you can use Rem, percent, pixels, whatever. For the width control it’s completely breakpoint dependent. You can nest the elements very well next to each other because it’s a flexbox so you don’t have a shrinking 12 column grid, you can utilize all the space you have in your layout. And when it comes down to a really easy fix and you want to make it really easy for the content creator later on you could use the grid option, but this still relies on a helper class to set for example the max amount of columns on a desktop breakpoint.

I hope this helps you to get the idea when to use which solution in your layout and I’ll see you soon.

For more videos and information please visit our Helpcenter.