[Resolved] 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?

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.

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

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

Glad to be of help