Design comparison
Solution retrospective
My Organization skills and a better understanding of grid.
What challenges did you encounter, and how did you overcome them?Grid rows and columns and different flex properties.
What specific areas of your project would you like help with?This project helped me get a better understanding of grid.
Community feedback
- @dylan-dot-cPosted 9 days ago
This is a great solution and it looks perfect!
There is something small that could be overlooked but could help you make a more flexible grid layout.
So what I saw you did was using 3 columns and used a flex for the middle column div. To be Honest, this was my first initial thought until I saw someone did it using only grid. The drawback of this solution would mainly be on tablet screens where you can fit the cards in a 22 grid instead of a 41 grid. You could workaround it by making the flex-direction row, and maybe put it as the first item in the grid, but that wouldn't preserve the default order of items on the webpage.
ANyways what you could do is use a grid of 3 columns and 4 rows(on desktop), and for the first and last column, center them between using
row: 2 / 4and on tablet you could just change the template to a 2*2 and order it natually.I hope this makes sense to you.
ANyways all the best, take care.
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