I have some cards on my page that are created with a grid. The grid items are all the same height, but the content’s height varies. I’m trying to figure out the easiest way to have a button at the bottom of the card pinned to the bottom of the grid item.
How would this be accomplished in Elements?
This image shows this grid and how the button in the middle grid item is not flush with the bottom of the grid item.
It’s certainly doable, can you post a screenshot of the node tree so we can see how things are set up, better yet post the project file and we can fix it for you!
If they are flex items, you might want to look into the alignment options in the inspector.
This is what it looked like in the most basic form. I know from experience doing this sort of thing that what is needed is to group the top three elements (image, heading, and paragraph) and then the button.
Then you set the alignment to space BETWEEN, and it should take the space below the button and add it between the group and the button.
So I tried that approach using a flex, where I grouped the top three elements into a flex item and the button into another item. I then set the flex to space between; nothing happened. No combination of alignment options would do anything.
NOTE: I had a section that Flex was inside to get the background color. That caused the header to be centered, which was not intended. But I understand this has been fixed.
I also tried to handle the grouping with a container instead of a flex item to group the three elements. I then had the container and button in the grid item and used its alignment options to attempt to get the desired effect, but that didn’t work either. The “align” option in the grid item should have a “between” option. I tested the center option, and it did the right thing, but there is no “between” or “around” in the grid item alignment options.
This approach introduced another problem: I had to ditch the section because it would have encapsulated all of the elements and prevented the grid item from performing the alignment. I think grid items need to support background colors, so you are not forced to use a section or container to get a background color. Which in turn affects the handling of alignment by the grid item.
I’m unsure if I’m doing something fundamentally wrong or if the BETWEEN alignment option is not working correctly.
Let me know if you would like the project, although I have reverted it to the simple layout in the screenshot.
I just had a quick go at seeing how I might solve this layout as I think there’s probably multiple ways of doing it!
Here’s one way, you could set the base size on the text box flex, like this:
That sort of works crudely but is not the most elegant solution. To make this work across all breakpoints, I had to override some of them to alter the “basis.” If you were trying to create a card that could be reused, you would need a different approach.
I know the “between” alignment is the correct approach; I don’t understand why it doesn’t work in Elements. I have looked at many different CSS solutions and most utilized the “between” approach. It makes sense because it is not tied to any “magic” number and can grow and shrink as needed while leaving the button at the bottom.
Do you have any examples of Elements using the “between” alignment option?
I’m trying to see a case where it is working as intended.
I’ll use this approach for now as it does work.
Hi @handshaper,
I’ve had a closer look at this and found that we needed to fix a couple of small issues.
In the current beta you won’t be able to achieve what you’re describing, but you will be able to in the next beta 
Awesome, @bon.
That would be the ideal solution. I was contemplating writing a custom component for that purpose. But it makes more sense to have one as part of Elements as there will be a lot of use for one.
I look forward to seeing what you come up with.
