Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section solution using Css grid

Mikhail 60

@Mixxyes

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What do you think is the most elegant way to solve this specific desktop card layout?

Community feedback

@Eileenpk

Posted

Hi Mikhail!

Your project looks great, I think using Grid the way you did was an excellent choice.

The thing I like best about Grid is the grid-template-areas property. It makes it very easy to see what the layout is and to change it in media queries. You would have to add a unique class name to each card for this solution to work.

Here is a link that goes into more about it. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

If you found this helpful please mark it as such :)

Marked as helpful

1

@VCarames

Posted

Hello @Eileenpk! 👋

As a friendly reminder, please avoid the following as it is against FEM’s policy:

  • "If you found this helpful please mark it as such"

Which can result in your getting your account flagged and banned temporarily/permanently.

"Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

The goal of providing feedback is to help individuals learn and grow as developers; not about gaining points.

Thank you for contributing to the FEM community!

Happy Coding! 🎆🎊🪅

0

Please log in to post a comment

Log in with GitHub
Discord logo

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