vertical alignment of a button inside a container

Hi Carlo,

This isn't possible with the current version of GenerateBlocks.

However, we're introducing the Sizing options in the next version which would make this layout possible without any CSS:
https://docs.generateblocks.com/article/sizing-options-overview/

You can find more info here:
https://generateblocks.com/flexbox-sizing-tabs-accordions-more/

We are currently in release candidate 2 already with the official version coming next week.

Is this something you would consider?

Hi Leo, sure.
What will be the settings in my case in order to have the button vertically aligned to the bottom?

Thank you

For now, with the current GB version, here's a CSS you can try:

span.gb-button.gb-button-30c4d4ac {
    margin-top: auto;
}

.gb-container.gb-container-d7063238 >.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gb-container.gb-container-d7063238 >.gb-inside-container .gb-container.gb-container-fa8cb2b5 {
    margin-top: auto;
}

In the upcoming update, you'll be able to do this with no code needed.

Thank you Fernando!

I have Version 1.5.0-rc.2 installed (it's a staging website and I wanted to start renewing the website with the latest version of gb).

Is it already possible with it (and if yes, how)?

Hi there,

here is a mockup of how it would work using GB 1.7 ( RC 2 ) and GB 1.5 ( RC 2 ),
Create a new draft page, and from the top bar 3 dot menu change to Code Editor, and paste this in:

<!-- wp:generateblocks/query-loop {"uniqueId":"18a3828b","query":{"post_type":"post","per_page":10}} -->
<!-- wp:generateblocks/grid {"uniqueId":"e660a73e","columns":1,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"0bf21d29","isGrid":true,"isQueryLoopItem":true,"gridId":"e660a73e","bgImageInline":true,"isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","sizing":{"width":"33.33%","height":"300px"},"paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"useDynamicData":true,"dynamicContentType":"featured-image","lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/headline {"uniqueId":"63822e6f","blockVersion":2,"backgroundColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-63822e6f gb-headline-text">Title</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button {"uniqueId":"68fd17bd","hasUrl":false,"blockVersion":3,"display":"inline-flex","justifyContent":"center","marginTop":"auto","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","useDynamicData":true,"dynamicLinkType":"single-post"} -->
<span class="gb-button gb-button-68fd17bd gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

The basics:

1. The parent Container ( Post Template ) Block has its Layout > Display set to Flex with a Column Direction. And has a min-height of 300px.

2. The Button Block has a top margin set of auto which forces it to the bottom of the container

Thank you David,

it's very interesting.

So if I understood correctly, without "coding" (html/css) this result it's still not possible with the GBpro 1.5 ( RC 2 ) but it will be with next production release?

That HTML above is the code that is generated by GenerateBlocks ( free ) 1.7 RC2.
I provided it so you can add it to the code editor, and the switch back to the visual editor. You can then see how i build it with those blocks

Thank you David, now it's clear

great way to show solutions by the way ;)

Glad to be of help