How can I go about implementing this flex layout
I found this amazing portfolio - https://yasio.dev/#work
On the first impression i thought it was a grid layout , but by inspecting it(quite literally) I found it was using flex box with different margin values ,
After a lot of brain storming I still cant figure out how can I dynamically generate this layout.
I am assuming this is not hard coded
TLDR; The same thing as in the link as it generates the same layout on refresh , i.e the placement of each projects remain the same
------------------------
each time their placement remains the same ,
i.e
if the list of projects is - [...proj1 , ...proj2]
the generated layout would place proj1 on x and proj2 on y
if the list of projects is - [...proj1 , ...proj2 , ...proj3]
the generated layout would place proj1 on x and proj2 on y and proj3 on z
so on and so forth
------------------------
your help is much appreciated
On the first impression i thought it was a grid layout , but by inspecting it(quite literally) I found it was using flex box with different margin values ,
After a lot of brain storming I still cant figure out how can I dynamically generate this layout.
I am assuming this is not hard coded
TLDR; The same thing as in the link as it generates the same layout on refresh , i.e the placement of each projects remain the same
------------------------
each time their placement remains the same ,
i.e
if the list of projects is - [...proj1 , ...proj2]
the generated layout would place proj1 on x and proj2 on y
if the list of projects is - [...proj1 , ...proj2 , ...proj3]
the generated layout would place proj1 on x and proj2 on y and proj3 on z
so on and so forth
------------------------
your help is much appreciated
Yasio portfolio
Webdev, Webdesign, UX, UI, IoT, Mobile apps, Motion design and more. Yasio portfolio website SPA, Vue, SSR, PWA, Serverless.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
