Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I've already done this challenge before, but I did again because it's included in the learning path so all good. I've used this time sass and lighthouse which I didn't last time.
What challenges did you encounter, and how did you overcome them?I tried to do it using CSS grid and not adding the .column
and .column-2
classes but I failed, I'm curious to know if that's possible.
Community feedback
- @haquanqPosted 4 months ago
Hey @AymaneOnline,
It is totally possible to complete this solution using
display: grid
.How does it work
- You need to flatten each card inside it HTML structure instead of grouping 2 cards inside a
div
in the middle. - After setting
display: grid
on cards container, you can manipulate each card's position on the grid withgrid-column, grid-row
. For example if i want to change.first-card
row position:
.first-card { /* position at row from 2, end at 3 (same to grid-column)*/ grid-row: 2/3; }
- To align each card in it's zone (grid divided zone), use
align-self, justify-self
.
You can check out my solution for this challenge for more references.
Play around these properties above and let me know if you need further example!
Marked as helpful0 - You need to flatten each card inside it HTML structure instead of grouping 2 cards inside a
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