Submitted almost 4 years ago

Four Cards solution, using CSS Flexbox layout and SCSS

Rufus• 30

@rwaterlow

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Stephen• 180

@stephenwbolger

Posted almost 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.

Please log in to post a comment

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