@elaineleung
Posted
Hey Chris, great work with this component, and I know exactly what you mean about working on smaller projects while in the middle of a bigger one. In fact this week instead of working on my challenge, I'm building a small reference component library on my CodePen where I try out different approaches of writing components like this one. I just made a 3-column one with flexbox where I use flex-wrap instead of changing flex directions in the media query, and it might address what you're asking in your question. Like you, I also fall into writing a lot of code when building out the component and it's only later when I revisit my code as reference that I see a lot of things I can cut out.
Here's my component with flexbox and one with grid that you can check out.
Marked as helpful
@ChrisAndrewsDev
Posted
@elaineleung Excellent, I'm checking that out now 😄
I also see you implemented the minmax() function which is something I've been trying to squeeze into my projects, but wasn't super sure how to implement it.
I am not super experienced with re-factoring my code at this point and most definitely need to skill up on that, it's good to have other pairs of eyes on your code!
Thanks for the feedback and resources, it's much appreciated!
@elaineleung
Posted
@ChrisAndrewsDev Happy to share! I probably use clamp() and min() a lot more than minmax(), mostly because I don't usually use grid, but yeah it takes a lot of experimenting and hair pulling too at times 😅
@ChrisAndrewsDev
Posted
@elaineleung Awesome I will look into those as well, I'm still getting to grips with some of these functions and tricks 😵
