Simple price grid component using html and css

Community feedback

• 

  Rafal•1,395

  @grizhlieCodes

  Posted almost 4 years ago

  Yes it can!

  First of all, great question. I don't see people asking if something can be done more efficiently, something I'm a big fan of, I learn how to make code more efficient daily. So in my opinion - great attitude 👍

  It can be much more efficient. This is looking like an 'older' way of positioning things. The newer technologies CSS offers us are:

  1. Flexbox
  2. CSS Grid

  Edit: I did see you used display: flex; but I don't think you understood its power in this attempt. So hopefully the below helps a little.

  Both are necessary to learn in my opinion so you're safe focusing on either. I'd say learn Flexbox first though as you can get most simple layouts done quite quickly with it. Grid is amazing and gives you insane control but it's for (optionally) more complicated layouts.

  AS to how exactly can this be done more efficiently:

  You positioned a lot of things 'absolutely'. This is unnecessary in a layout like this. It's unnecessary in most basic layouts actually. I wrote up a super simple example of how to position this with flexbox.

  I did not give the bottom 2 flex-items identical widths to illustrate how you can use flex-basis to style things a bit better.

  Further resource is Kevin Powell, a great teacher and YouTuber. I actually am doing a course on Flexbox from him (1 year after I learned flexbox I'm still learning new stuff about it...)

  I would write more things but I don't want to 'word-vomit' here. Have a look at what I created for you and ask any questions you'd like. Awesome start, I hope to see more solutions from you in the future.

  00

  Marked as helpful
• 

  Paras Sharma•700

  @imparassharma

  Posted almost 4 years ago

  Thank you for taking out time and helping me out. It means a lot to me and yes you are right I know a very little about flexbox actually I took the Angela's webdev course & later found out that there is much more for positioning so I think & also by your suggestion, I should first study about it more. I looked at your codepen example and it was so exciting that I can do that type of layout more efficiently all thanks to you.

  11