Skip to content
Submitted over 2 years ago

Single price grid component

Jax Teller•670
@piushbhandari
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

when using css grid, the content starts to overflow on screens less than 375px. one solution i suppose is overflow:hidden but the content starts to disappear. any tips here?

i solved it by using flex and flex-direction: column and it starts scaling nicely on smaller screens, but i was wondering if there was a css grid approach to this

Community feedback

  • Tim•100
    @tlauffsPosted over 2 years ago

    Hi, great solution. Yes you can use grid for this. For example you can use 'grid-template-columns: repeat(2, 1fr);' to create 2 columns of equal width that will shrink as the screen shrinks. A great tutorial that helped me understand how to use grid is here: https://www.youtube.com/watch?v=rg7Fvvl3taU

    Marked as helpful
    0
  • Jax Teller•670
    @piushbhandariPosted over 2 years ago

    btw i used a different bg color on the 3rd grid cell b/c figma wouldn't give me the color.

    0

Please log in to post a comment

Log in with GitHub

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