Support a way to align Blocks at the bottom of their container

[MadtownLems]

It's a pretty common/popular design concept to have some information in columns, with a call to action (or similar element) at the bottom. Ideally, these calls to action would be aligned with each other.

Notice how the third "Learn More" button is much higher than the others.

Currently, I don't believe there is a core-supported way to force the "Learn More" buttons to be aligned in the bottom of these columns (without manual custom CSS). I'm trying to come up with how this would be implemented, or if there are any ongoing conversations around it that I can participate in.

Any ideas?

[skorasaurus]

I believe this type of design is only possible with CSS Grid.... Even with grid, it's a little tricky to do since the subgrid property is only implemented by firefox.

There's discussion at #47809 and you can cite your layout as an example.

[skorasaurus]

Remembered that this could be done with align-items: end on a parent block :)

[talldan]

How about this kind of structure:

• Stack (with min. height, central justification, space between alignment and padding set)
  • Stack (items aligned top)
    • Image
    • Title
    • Paragraph
  • Buttons
    • Button

Here's a screenshot of how it looks in the editor:

@tellthemachines may also have some other suggestions.

[tellthemachines]

I'm thinking all the cards can be Stacks within a Row, and then we play with their justification, alignment, Width and Height controls until we get the exact layout:

The code view for this would be:

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"stretch","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"color":{"background":"#506475"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"layout":{"selfStretch":"fixed","flexSize":"50%"}},"textColor":"contrast","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group has-contrast-color has-text-color has-background" style="background-color:#506475;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:image {"id":7,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2023/02/charlie05-1024x768.jpg" alt="" class="wp-image-7"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Card title</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cat ipsum dolor sit amet, meoooow. Lies down . Chase after silly colored fish toys around the house. I is playing on your console hooman walk on keyboard</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">a button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#506475"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"layout":{"selfStretch":"fixed","flexSize":"50%"}},"textColor":"contrast","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group has-contrast-color has-text-color has-background" style="background-color:#506475;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:image {"id":7,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2023/02/charlie05-1024x768.jpg" alt="" class="wp-image-7"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Card title</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fill","flexSize":null}}} -->
<p>Cat ipsum dolor sit amet, meoooow. Lies down .</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">a button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

It's not a great experience currently because due to the flex implementation of Row, we have to set the width of each of its children explicitly to 50% 50%, or 33% 33% 33% etc. It would be nicer with grid, and definitely worth looking into as a future grid use case!

[skorasaurus]

Thanks for sharing the code and the example.

This setup is a good start and suitable for some needs although I'm making a very similar layout to @MadtownLems and so far, Gutenberg's layout tools kind of fall apart when you have more than 3 'cards' (whether they're stacks or groups) in your example.

For example, if you have 5 cards; they don't stretch across multiple lines and will appear squished on smaller viewpoints.

You can adjust the parent row container and add flexWrap: wrap as a block attribute and value (translating to the css rule flex-wrap: wrap) but you then only 1 card item will display horizontally even on larger viewpoints.

Ideally, where you could set the flex-basis on each card container in this example that I made

[tellthemachines]

You can set flex-basis on each card by using the "width" control under Dimensions in the sidebar:

But I agree that the responsive behaviour is far from ideal. Flex is not very well suited to fine-grained responsiveness on containers with multiple children.

[DarkLite1]

Stumbled upon this same issue. Is there a native Gutenberg solution in the meantime? Like using "Group" and then within the group select "Aling to bottom" or something?

See the price not being aligned:

[hanneslsm]

Yes, create a stack and give it a 100% Min height and set height of the inner stack to "fill"

Block Markup

<!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"stretch","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"backgroundColor":"accent-4"} -->
<div class="wp-block-column is-vertically-aligned-stretch has-accent-4-background-color has-background" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:group {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet. Aut repudiandae rerum </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Click here</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"stretch","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"backgroundColor":"accent-4"} -->
<div class="wp-block-column is-vertically-aligned-stretch has-accent-4-background-color has-background" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:group {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet. Rem rerum tenetur est eligendi amet qui tenetur alias aut explicabo perspiciatis qui aspernatur consequatur. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Click here</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[hanneslsm]

Like using "Group" and then within the group select "Aling to bottom" or something?

Ah, I think I misread. This function as you have described it does not exist.

[DarkLite1]

Figured it out thanks to this YouTube tutorial.

In the Spectra plugin you have a "Container block" that has a lot more options than the "Columns block". These containers use flex classes and can easily be modified to align the content perfectly without any custom CSS or coding.

For anyone struggling with this, please follow the video and you'll be fine.