Design comparison
Solution retrospective
I was thinking more dynamically initially when planning the solution, i.e. avoiding putting each box in specific columns, so if more boxes were added in future the shape of the design would evolve. I combined this with my own challenge of using only CSS Flexbox layout, not CSS Grid.
In the end I couldn't achieve the cross shape without combining 2 of the boxes into the middle column using CSS Flexbox.
Has anyone created/found a solution using these same parameters?
Community feedback
- @stephenwbolgerPosted over 4 years ago
I think using Flexbox is the best option for this layout. Using three columns, with two cards in the middle column is the solution I used, which you can see here https://www.frontendmentor.io/solutions/four-card-feature-section-htmlcss-XPWlDidiD.
One thing you might be able to tidy up is to place the image in each card outside the div it is contained within and simply using align-self:flex-end and margin-top:auto. Of course there are many ways to achieve the same result, but overall, I think you took the right approach using Flexbox.
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