Skip to content
Submitted about 1 month ago

Responsive 3 column preview card component using CSS Grid and Tailwind

tailwind-css, vite, react
Akiz-Ivanov•430
@Akiz-Ivanov
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Nothing.

What challenges did you encounter, and how did you overcome them?

Biggest challenge was getting the spacing right. Overcame with trial and error.

What specific areas of your project would you like help with?

Can't think of anything.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,400
    @dar-ju

    Hi, Akiz-Ivanov!

    Great job!

    I noticed that the buttons are not in one line at a screen resolution of 790px. The same problem will occur if you change the amount of text in the cards. It is important that the layout is resistant to such changes! The best solution would be to wrap the image, title and text in a separate block, the button separately and make justify-content: space-between; in the parent block then the button will always remain at the bottom.

    Otherwise, everything is cool! Good luck with the projects, you are great!

    Marked as helpful
  • P
    Thomas TS•1,330
    @ttsoares

    Thank you for the example of using 'clamp' with Tailwind !

    As we get used to doing all with Tailwind classes, we tend to forget about CSS intrinsic features... as 'camp' is.

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