Design comparison
Solution retrospective
Do you use flexbox or grid more, personally I find flex more customizable.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Atharva Hinge, congratulations for your new solution!
I decide between
flex
orgrid
in base of the complexity, for example, if is a complex layout I usegrid
is is a simple component I useflex
.In this case I choose
grid
because was easier to create the component with two colum, all I needed wasmax-width: 1000px
anddisplay: grid
andgrid-template-column: 1fr 1fr
to have a component with two column with 50% of the parent.To add the exact same purple overlay effect for the image, matching the design files you can use,filter
ormix-blend-mode
. See the code belowimg { mix-blend-mode: multiply; opacity: 70%;}
π I hope this helps you and happy coding!
Marked as helpful1 - @DavidMorgadePosted about 2 years ago
Hey Atharva, congrats on completing the solution of this challenge
Regarding your question, I personally use more flex but because is easy to pull out the trick for most of the cases that positioning is needed, and use grid for more complex-multiply columns or rows layouts, for example, for an e-commerce product list I would probably use grid, but for a 1 row navbar I will use flexbox.
Also regarding your project, you should try using this as your pseudoelement color on your image and see if it looks better:
background-color: #AB5CDB; mix-blend-mode: multiply;
, I think this one is closes to the design one!Hope my feedback helps you!
1@36atharvaPosted about 2 years ago@DavidMorgade flex is bit handier than grid when it comes to positioning :)
1
Please log in to post a comment
Log in with GitHubJoin 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