Need help with building portfolio grid

I am currently working on a portfolio website and need some help with the portfolio grid. The grid is designed differently with random positioning of each item. I want to load the portfolio items with CMS and I have no idea how to get the layout as shown in the mockup here - Screenshot by Lightshot

Any help would be really appreciated. :slight_smile:

Hi @jays_dhillon and welcome on forum. The one way how to achieve this design in Websites is using a CSS Grid. But first thing first. I have looked on your design and I wasn’t able to find what grid system you have used mean what columns and gutters sizes are. It looks to me like you have randomly placed rectangles on artboard.

Once you decided what system you use and set your basic grid structure you can replicate it in WF with use of CSS Grid and Areas. It can be a bit tricky and time consuming to make it responsive but it can be done. You can see on image a simple example I have done in past.

I do not know what your specialisation is (if you are designer or developer) but I will recommend to look into book Making and Breaking the Grid to understand Grid systems and after find tutorials about CSS Grid (on YT are nice series). Once you get your knowledge what, why and how you can apply these skills in WF.


Hi Stan,

I really appreciate your effort and I guess I would be able to get this layout with the method you explained.

Thanks for saving my time. :slight_smile:

1 Like

Hi @jays_dhillon if you do not have further question related to this topic feel free to close your request. :wink:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.