Submitted almost 3 years ago

Responsive Four Feature Card Section Using CSS Grid

Gabriel Ayuba• 270

@Tzienom

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, folks. I used css grid and a position relative to get my cards in place for the desktop layout. Is that the best solution to it, and is there any other method to laying the cards out?

Secondly, the border color at the top of each card, is a 'before' pseudo class or border-top more appropriate? Thanks in advance.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 3 years ago

👋 Hi Gabriel!

Regarding to your questions:

In my opinion, using grid is the best option to create that layout and obviously there are many ways to create that layout. You can use flexbox, absolute positioning(not recommended), and etc.
I used border top to create that and in my opinion, that's the best and easiest way to achieve that.

That's it! Hopefully this answer your questions!

Marked as helpful

Gabriel Ayuba• 270

@Tzienom

Posted almost 3 years ago

@vanzasetia Yeah, it does answer my questions. Thanks a lot. Really appreciated.

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