Submitted about 2 years ago

Four card feature created with CSS Grid

Padawan• 160

@soitirakis

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 world, I finished the four card feature challenge. I used CSS Grid to finish it. Is there any other solution to this? I read something about combining Flexbox and Grid. If you can have a look strongly appreciate it. Happy coding!

Community feedback

Ahmed El_Bald• 1,020

@Ahmed-Elbald

Posted about 2 years ago

Hey Padawan,

I think your solution is great concerning using the right method (Flex or Grid) so you don't have to worry about that.

But actually I have some notes on other aspects:

The top border of the card should be quite smaller. Its width could be just 5px
Also I would have been better if you'd used the colors in the "style-guide" file without modifying them.
And finally I think the box-shadow of the cards has a big spread. You can set the spread to zero and play around with the blur. Something like this 5px 5px 10px 0px var(--color-paragraph).

I hope you find this helpful. Thank you

Marked as helpful

Padawan• 160

@soitirakis

Posted about 2 years ago

@Ahmed-Elbald thank you very much for the feedback. I will look to it and make the proper changes. Happy coding

faizan• 2,420

@afaiz-space

Posted about 2 years ago

Hey @soitirakis, remove the padding from the container class.

Padawan• 160

@soitirakis

Posted about 2 years ago

@afaiz-space thank you for reviewing my code. I will look over it and I will make the change. Happy coding

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