Submitted 12 months ago

Responsive Single grid price component using Grid

#bem#accessibility

Madhavan•370

@madhavan-ts

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I have completed this as my 8th 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 have learnt and used the grid-template-rows and grid-template-columns for making the grid responsive

.container {
  display: grid;
  grid-template-rows: repeat(2, minmax(1fr, max-content));
  grid-template-columns: repeat(2, 1fr);
}

@media only screen and (max-width: 650px) {
  .container {
    width: 31rem;
    grid-template-rows: repeat(3, minmax(max-content, 1fr));
    grid-template-columns: 1fr;
  }
}

Please check this approach whether it is a correct one or not.

Advance thanks for any comments 🫡.

Community feedback

Miran Legin•680
@miranleginPosted 12 months ago
Hi @Madhavan,

I would remove grid completely from the mobile view, if you disable it yourself in the Dev Tools you will see that it's not doing anything useful.

Better solution would be to include it in the media query on the resolution you actually need it, in that way you don't need to override anything.

Also I would like to +1 the previous posters response about width/min-width/max-width. In general it is advisable to not use width/height on elements because that can lead to overflow issues etc...

Happy coding!

Cheers, Miran
1
Andrés Gutiérrez Ramírez•2,470
@AGutierrezRPosted 12 months ago
Hello there @madhavan-ts 👋. Good job on completing the challenge!

I have only one suggestion about your code that might interest you.:

-- Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Replace the width on .container for a max-width

I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

Happy coding!
1

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