Design comparison
Solution retrospective
I've managed to use grid and flex in the same page which is something I used to struggle a lot with.
What challenges did you encounter, and how did you overcome them?The placing of the cards was tricky, although Im pretty sure the way I did it is not the correct one.
What specific areas of your project would you like help with?I would like suggestions about how to place the cards appropiately.
Community feedback
- @wonderlust101Posted 3 months ago
I think your on the right track, a nicer solution that I found online was using
grid-template-areas
. This is what my solution looked like for main:.featured-cards-grid { display: grid; grid-template-areas: 'a' 'b' 'c' 'd'; gap: 30px; max-width: min(95%, 69.375rem); @include a.breakpoint(medium) { grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-template-areas: '. b .' 'a b d' 'a c d' '. c .'; } // Sets a grid area for grid children & > :nth-child(1) {grid-area: a;} & > :nth-child(2) {grid-area: b;} & > :nth-child(3) {grid-area: c;} & > :nth-child(4) {grid-area: d;} }
You have more control on where the children of the main goes. Obviously that just one solution, there are many other solutions. I recommend either going with the one your comfortable with or if you want to challenge yourself use the one your not comfortable with.
0
Please log in to post a comment
Log in with GitHubJoin 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