Submitted 10 months ago

Responsive Four card Feature section using Grid

Madhavan•340

@madhavan-ts

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I have completed this as my 12th challenge in Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.

I used the grid layout and used the grid-rows and grid-columns properties to align the card . This has helped me a lot.

.products {
  display: grid;
  grid-gap: 2.5rem;
  grid-template-rows: repeat(4, minmax(max-content, 1fr));
  grid-template-columns: repeat(3, 2fr);
}

.products__card--indigo {
  grid-row: 2 / span 2;
  grid-row-start: 2;
}

.products__card--red {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.products__card--yellow {
  grid-row: 3 / span 2;
  grid-column: 2;
}

.products__card--blue {
  grid-row: 2 / span 2;
}

If anybody has an easier approach then I am happy to hear that and please go through the code and if you have to correct any mistakes I am happy to recive the comments.

Advance thanks for the comments 🫡.

Community feedback

raya•2,850
@rayaattaPosted 10 months ago
hi 👋 Madhavan, congratulations on completing this challenge 🎉 I only have 2simple suggestions to improve your code.

1 It's nice to see that you have tried to make your html as semantic as possible but you could make it more semantic by changing These divs

<div class="products__card products__card--indigo"> <div class="products__card products__card--red"> <div class="products__card products__card--blue"> <div class="products__card products__card--blue">

To articles with the same respective classes You can find out more about the article tag in this article.😉

2 In your css I noticed you used

html { font-size: 62.5%; }

Despite some sources recommending this hack, It is not a very good idea to use it because

a) Overriding defaults causes accessibility problems for people who changed their font sizes.

b) Many engineering teams would look down on job applicants who use this in their code because of the issues it can cause. Check out this FED article About the grid, its the best solution but just to get more familiar, you can check out other people`s solutions. I'm sure you will learn a lot. You can also check out my submission

I hope this helps Did I mention your solution is really epic🤩
0

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