Mobile first responsive solution to Single Price grid UI challenge

Hi, @kanuos. It's a really good solution. Keep coding. I have a suggestion for you.

You can use grid-template-rows:repeat(3, auto); instead of grid-template-rows; repeat(3, 1fr); for your body > article element. It calculates elements' height values depending on their content. However, the grid items height values should be individual. This will make your design more responsive.

I hope this will help you to improve your perspective. Keep coding. All the best.

Replace the article tag <article> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING