Hey!
I wonder if I can create a portfolio grid similar to this one Work - Mo Eid - Digital Designer & Art Director based in Dubai using webflow CMS. I looked for tutorials but didn’t find the one I need. So would appreciate any tutorials or instructions.
Basically, I’d like to know how I can make each portfolio item have different size and position.
what stopping you to use browser Dev Tools and investigate how your self @victoriaaa. Anyway, it is pretty basic 12 cols grid in each section. 
Collection lists are generally designed to build uniform layouts, like lists and grids tables.
For a non-uniform layout, you could use multiple collection lists. First list shows item 1 only. Second list shows item 2 only, and so on. Then you style and position each of them where you want.
It’s quite simple. Just put the items in the grid layout and play around with custom styling:
<style>
.w-dyn-items > :nth-child(odd) {
grid-area: span 1 / span 2;
}
.w-dyn-items > :nth-child(even) {
grid-area: span 2 / span 1;
}
</style>
You can achieve desired positioning for your grid by changing nth-child pattern and spanning.
E.g.:
Thanks, Julian
In this case the “developer” used -300px margin 
your solution @JulianAndersen is great but this website has many sections and each section holds 1 or 2 images set to different number of columns.
That’s what I thought about but there’s a max limit of 20 collection lists per page unless pagination is enabled.
Thanks for your reply, I saw they used a grid but I was stuck with styling individual cms portfolio item so that they take different number of columns. Just was not sure if I needed to use some code to do it.
hi @victoriaaa the website you referring is in WF and does not use CMS as all is hardcoded.
Anyway, why do you think that 20 collections would not be enough?
website you referring has 17 images and only few is 1 image per row.
5 * 1 = 5
12 / 2 = 6
6 + 5 = 11
in worst scenario you will need max 11 collections.
Yes you’d use quite few, but it’s the easiest way to position items arbitrarily in the designer. Any other approach involves using custom CSS to override the collection list grid layout at the item level.
That’s actually not difficult though-
If you use Stan’s 12-column grid approach then the CSS is just a starting column, colspan and a top-margin for each item, something like this;
.arbitrary-grid > .grid-item:nth-child(8) {
grid-column: 5 / span 7;
padding-top: 0;
}
Here’s what that looks like;
https://x-arbitrary-grid-layout.webflow.io/
And a readonly link if you want to unpack it, the CSS is in the embed at the bottom of the page.