Four Card Feature Section using Flexbox
Design comparison
Solution retrospective
this one really had me thinking of which one to use between flexbox and grid. i'm not really sure if the two methods are valid to use in this design. i wasn't able to make it close to the design as it wraps and not consistent but it's all i got. i would really appreciate any honest feedback and suggestion if there is a better approach for this challenge.
Community feedback
- @AgataLiberskaPosted almost 4 years ago
Hi Ron :) I think grid is best for this challenge. For the desktop version, you can set up 3 columns and 4 rows and then tell where you want each card to start and end or use grid template areas. Hope this helps!
0@rontoyhacaoPosted almost 4 years ago@AgataLiberska thank you for the suggestion but i actually tried grid and it didn't work. maybe i just haven't explored it that much. grid was also the first thing that came to my mind for this design.
0@AgataLiberskaPosted almost 4 years ago@rontoyhacao if you want to learn more about grid, Jessica Chan (coder coder on youtube) has a video series where she builds a responsive website - she uses grid template areas for the footer section, I found that very helpful. Wes Bos also has a free course all about CSS grid, I haven't gone through the whole thing yet but the part I have been through is really well explained. I personally used grid template areas for this challenge because you can easily assign what space you want to be left empty, but it's probably not the only approach :) good luck :)
0@rontoyhacaoPosted almost 4 years ago@AgataLiberska i'll check it out, i appreciate the feedback thank youu.
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