Multi-column card layout

[audreyfeldroy]

Eventually there will probably be 9+ cards, each featuring a different way to help families in need.

Putting 2-4 cards in each row would improve readability. We could use help converting the layout from single-column to multi-column.

Here are some ideas on how to get started with this issue:

• Study the 3 side-by-side card example in daisyUI's Card docs
• Perhaps use lg, xl, or 2xl on the main container div in place of md there
• Perhaps remove lg from each card (see this line for an example)

I'm still learning Tailwind CSS myself and am unsure of what I wrote above. Other implementations are certainly possible.

@GrungeKarma if you're interested, this issue builds upon your excellent work in #32 and I'm happy to help however I can.

[GrungeKarma]

I would be happy to take a look when I get some free time. Probably late tonight or tomorrow. Funny that you should say you are still learning Tailwind, I am learning it as well.

[GrungeKarma]

I am seeing an issue as this project moves forward. I am thinking we need to standardize the card size on a component level. As it sits, when I try to adjust the layout of the cards it looks bad because of the different card hights due to the different lengths of text in each card. It may be better to control the size of the cards directly so we can predict how they will act with flexbox. It would probably be easy to add a description length for each explanation and include a button for more information that brings up the expanded explanation as a popup or a separate page. Let me know if you have any ideas as well. Those are just the ideas going through my head.

[audreyfeldroy]

I agree. If it helps, you can truncate the card text for now or cut out sentences.

[audreyfeldroy]

While #38 is still a possible dependency of this issue, it doesn't necessarily have to be.

I remembered a multi-column card layout can work with unequal card heights. This type of layout is typically referred to as masonry, named after the popular Masonry package.

To see a masonry layout in action: https://getbootstrap.com/docs/5.0/examples/masonry/

Here are a couple implementations of masonry layouts with Tailwind CSS: https://stackoverflow.com/questions/66914169/can-i-create-a-masonry-layout-using-tailwind-css-utility-classes

[audreyfeldroy]

I assigned you this issue @GrungeKarma, but no pressure. If you get too busy or would rather work on something else, unassign yourself and someone else can take this 🙂

[GrungeKarma]

I am still working on it. It is a finicky issue.

[GrungeKarma]

Here is an Image for as far as I have gotten. The issue is mobile responsiveness. I cannot get Tailwind to return to a single-column layout on mobile sizes. Any insight?

https://imgur.com/a/JErprlu

[audreyfeldroy]

That's awesome @GrungeKarma. Submit a PR of what you have so far, then I can look into the mobile responsiveness.

[GrungeKarma]

Submitted the pull request. There are some conflicts because it took a couple of days. I am not familiar with how to resolve the conflicts between the files.

[GrungeKarma]

Submitted again fixing mobile responsiveness.

[audreyfeldroy]

Thanks again!