Full width for Card component

[dairdr]

I would like to have the prop in the Card component so I can fill the space available in the parent component, I have had the need to use Grid -> Column -> Card and it seems I can't take advantage of the space available.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Card does not filled up allocated Grid spaces (updated: 11/16/2023, similarity score: 87%)
• How to get Grid items to expand to fill available row space? (updated: 01/25/2023, similarity score: 87%)
• Height and width for the Card component (updated: 12/05/2022, similarity score: 86%)

[roxanagomez]

Hey @dairdr thank you for flagging this, would you mind sharing a code sandbox, I’ll pass it along to engineering to help troubleshoot.

[dairdr]

sure thing @roxanagomez, here's a code sandbox

[krisantrobus]

Hi @dairdr I took a look at this and this is due to the Grid and Column components using flex. When using a card outside of these components it will correctly fill the width.

I will expose a new prop to cards fillWidth to address this. How soon do you need this?

[dairdr]

thank you @krisantrobus for que quick response, for now we're using a Box to workaround this behavior, so not an urgent thing, but of course it'll be nice to have it shortly.

[serifluous]

Hey @dairdr ! This update will be available in our next release once this PR is merged: #4305