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
Not Found

Submitted

3-column preview card component

@Jorahhh

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


Okay, guys! I did this challenge using Flexbox....but I would like do it again with the Grid, but I'm still not into it.

I'd love someone to give me some advice on how to set it up, using always the same HTML lines code.

Community feedback

@arfarobs

Posted

Hey Angelo. I'm not the best with grid, so i can't answer that question. However, I have a suggestion when it comes to accessibility.

I notice that you have wrapped your HTML in a <div class="main">. To avoid getting the errors in your report, it would be better to wrap it in a <main> element.

Marked as helpful

0

@arfarobs

Posted

This might be useful for you. It's a game that will go through the basics of CSS grid.

https://cssgridgarden.com/

1

@Jorahhh

Posted

Ow Thanks man, its looks funny too

By the way, I’m already working on another challenge with grid layout (‘simple price grid component’) using a toooons of tutorial. It seems harder than flexs layout.

1

@arfarobs

Posted

@Jorahhh Haha. Yeah, I get what you mean. I've always preferred Flexbox. If you click the "Resources" tab at the top of the Frontend Mentor page, they have a ton of free resources that can help you learn grid.

0

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