Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502

Submitted

3-Column Card Preview Component using Flexbox and Grid

JAVV 80

@daisukeeita

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone 😁!

This is my solution to the 3-Column Card Preview Component.

What I used to center the component is the Flexbox. I approached this challenged using the Mobile-first workflow. I noticed in mobile screen that the layout of the component doesn't need to be changed, that's why I didn't use Flexbox or Grid as it will become redundant to its appearance.

I used the Grid layout in the desktop screen to control the width of the div at the same time since it was easy to adjust the size and margin of the contents (images, paragraph, etc), at least in my perspective.

If you have different approach to the challenged or if you have any feedback, feel free to comment it 👌👌!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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