Skip to content
Submitted over 2 years ago

Solution using flex and grid

Niezzxā€¢100
@Niezzx
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

There are still some small problems, when I resize the screen, the button position is not parallel because of the difference in content length; and the button itself has changed in size because of the reduction in size. I hope someone can give me some suggestions.

Community feedback

  • Michael Waalerā€¢230
    @10highPosted over 2 years ago

    I originally had the same problem. I solved it by making each card its own grid and using grid gap to space the segments. Looking back this was not the best way, but you can set the height on each grid row and then the cards will always be the same size.

    Good luck!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord