[Resolved] Vertical gap between blocks

[Thierry]

Hello,
I just read at least a dozen forum posts on probably the same question or almost but I just need to make sure i understand this correctly.
I have a grid with 3 side by side containers (columns).
In my first container in adding several different blocks which are now nicely stacking on top of each other.
How can I adjust the vertical gap between these Blocks?
Or do I first need to add another grid inside my first column container and then add the blocks inside that sub-grid?
Or should I go even further and first add containers inside if that sub-grid and add just one block inside of each of these containers?
Hope you see what I’m saying.
I look forward to your clarifying.
Have a nice day.
Thierry

[Fernando]

Hi Thierry,

You can add top and bottom paddings or margins to the Blocks.

If you find the need to place them in a Grid Block, you can set the Container Width of each “column” to 100% so that they stack on top of one another, and then add vertical gap.

In my opinion, if you can add paddings and margins to the Blocks them self, that would be better so there’s less mark up.

This would be preferential depending on the structure you want, their alignment, and what suits your design best.

[Thierry]

Thanks Fernando.
Ok but if you need to work it out with padding and margin, how are you solving it when you have 3 containers side by side inside a grid and you want all blocks inside of each container to evenly spread from top to bottom inside of their container?
Like when you have text blocks of different lengths in each of the 3 containers and then a button underneath each text block, and you want all 3 buttons to be at the same height on your page? I can do that easy with flexbox. I’m sure there has to be another way in GP/GB to achieve this than playing with padding right?

[Fernando]

I see. The case where paddings/margins wouldn’t be accurate would be when the Container of the Grid has a high height – greater than the total height of the Blocks inside.

Are you referring for instance to align-items: space-evenly for instance? If this is the case, it may be good to give the Grid a class, and then set it to flex manually through custom CSS.

[Thierry]

Yes that’s the scenario in talking about.

Yes I thinks its called “space evenly” but I really don’t have enough knowledge of CSS and how to apply this , I’m sorry. May i please ask you guide me through how to do this?

Also when you say it may be good to give the Grid a class, are you referring to the grid containing my 3 side by side containers? Or are you referring to separate grids I should add into each of these 3 containers?

Sorry for so many questions…
Hope you can provide further assistance. Thank you.

[Fernando]

It’s case to case, and depends on your structure. But you can add the class to the Parent Grid. You shouldn’t need to add another Grid inside if we’re using custom CSS to make the space evenly.

Yes, we should be able to assist you. Have you created your structure? Can you provide the link where we can view this?

[Thierry]

Yes, sure. Added credentials in private area below.
The structure is to be found under Appearance > Elements > Footer.
You’ll see my grid and 3 side by side containers in there.
Those 3 containers have uneven width but that’s intended as i’m trying to recreate the footer on this website:
https://parachutedesign.ca/

Thank you.

[Fernando]

Can you add a class for instance, grid-space-evenly, to the Grid Block and then class column-space-evenly to the Container Block you wish to space evenly inside the Grid?

[Thierry]

OK, thanks. I just did. But did not see anything change to be honest.

[Thierry]

Been Googling. Guess what i need on these individual containers (columns) in my footer is Flex’s align-items: stretch to ensure all items become same height, even if there’s more text or blocks inside one of these containers. Does that make sense?

[Fernando]

Thank you. Those are just selectors so we can target them with CSS.

Now, add this in Appearance > Customize > Additional CSS:

.gb-grid-wrapper.grid-space-evenly .gb-container.column-space-evenly > .gb-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

To see if it’s working, add more content to one of the other columns so that the height goes over the total height of Blocks in the
column-space-evenly column.

[Thierry]

OK great, Fernando! It’s working now. Thank you.
So i guess it’s only going to work like this now inside Grids or Containers where i added the Selector you gave me, correct? I obviously won’t need this everywhere on my website.

[Fernando]

Yes, it’s only going to work on Grids with those selectors and with a similar structure.

Thinking about it, for simplicity, we don’t actually need to add grid-space-evenly class.

The code will be just this if we do away with that:

.gb-grid-wrapper .gb-container.column-space-evenly > .gb-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

[Thierry]

OK i changed the code to what you just sent, but now its not working anymore 🙂

[Fernando]

Sorry about that, I missed removing a single .

I’ve edited the code here: https://generatepress.com/forums/topic/vertical-gap-between-blocks/#post-2362295

Can you try that now?

[Author]

Posts