How do you put Cards in a row with equal height?

I’m trying to build a row of cards with Content that varies in height. I would like the Button area to always stick to the bottom of the longer card so that they are all the same height. I can’t seem to make it work despite playing with the Fill and Hug settings. Help!

I would either fix the height of the parent container and then make cards fill it vertically and then make card body do the same (black area) or I would keep the tallest card dynamic (hug vertically) and stretch the others with fill container sizing, both card frame and the black area

However Figma guys say there is other way around → Office Hours: Auto layout redesign - YouTube, see at 43:38, seems like you can make child items fill the parent frame while maintaining hug height for it. I haven’t checked myself, though

Apparently you can achieve that at least three ways

  1. Absolutely positioned footers, the size of the footer should be fixed
  2. The tallest card hugs the content, others fill the parent
  3. The parent is fixed and cards fill it
2 Likes

Hi Pavel, apologies. I should have indicated that this row of cards is part of a design system that users with minimal figma knowledge use. They won’t be able to do any figma settings. All they do is enter the content.

I tried #2 and #3 that you mentioned but they are not dynamic enough for end-users. For #1, will the Content for all 3 cards be the same height?

Thanks for the youtube link! I will try it!

All cards will be the same height indeed. Seems like method number one would fit, especially if the footer height is not your concern

Hi Pavel, I finally got it to work! Thank you for the tips! I will be putting the information below for others.

Steps:

  1. Create card component that consists of 3 vertical frames - Image, Content, Button
    1a. Image - Hug, Hug
    1b. Content - Fill, Hug
    1c. Button - Fixed, Fixed. Absolute Positioning, Constraint Positioning Left & Bottom
  2. Group Image and Content into an Autolayout with Hug width and Hug height
  3. Put the cards into an Autolayout container. Change the card component within the container to be Fill instead of Hug.
  4. Try typing to see the effect.
1 Like

I tried the same and it worked…!!

Great Tip, was able to accomplish my idea with your tips.