Submitted about 4 years ago

Responsive Four Card Feature Section Using Simple CSS Grid

PrynsTag• 70

@PrynsTag

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've accomplished this using CSS Grid with the code just like this:

.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; }

I do not know if this is a hacky solution or if there is a better way of coding this with CSS Grid just let me know if this is a bad practice. *I know that this can be accomplished with Flexbox but I want to try a different way.

Community feedback

Adarsh Pratap• 5,515

@adarshcodes

Posted about 4 years ago

Hi! @PrynsTag, great work on this challenge a few suggestions for you. Your code is fine.

You can make some changes like decrease the width of the two side cards.
Below the cards, there is a huge gap at bottom reduce it
And remove the overflow: hidden; it disables the scroll property.
Great work no issues aroused.

Adarsh Pratap• 5,515

@adarshcodes

Posted about 4 years ago

Hi! @PrynsTag, great work on this challenge a few suggestions for you. Your code is fine.

You can make some changes like decrease the width of the two side cards.
Below the cards, there is a huge gap at bottom reduce it
And remove the overflow: hidden; it disables the scroll property.
Great work no issues aroused.

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