Mobile Responsive Single Price Grid Component Built with Grid & Flex.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Johnny, congratulations for your solution!

  An alternative to create this grid layout is creating a grid like this grid-template-column: 1fr 1fr 1fr 1fr and set to the bigger row grid-column: span 2 then for the mobile version set the grid-template-column: 1fr for a single column and each in a different row.

  But anyway you did it right, this is just another way to build it.

  Marked as helpful

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  ayee! thanks for the feedback bro. i did try this approach initial but it was acting a bit weird so i went with this one 😅. although i add a max width tho. i wanted to ask if i had to do that?

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats on finishing the challenge!

  Like Lucas said you could definitely go for a four column grid, you could also get them with grid-template-columns: repeat(4, 1fr) this will get you exactly 4 columns with the same size!

  Also, your project looks fine, maybe a bit bigger than normal, are you using a little monitor when you are doing your challenges? or maybe you have you screen with a bit of zoom?, anyway you can fix it by reducing a bit the paddings and the sizes of the font and boxes, don't worry about that, it still looks good! Good job.

  Hope my feedback helped you!

  1

  ---

  

  Johnny•470

  @johnnysedh3llloPosted over 2 years ago

  thanks david, I'll try using the grid-template-columns method instead.

  1