Hey everyone, just wondering if something like this is possible. In grid, you can stretch a single column and row across multiple in order to extend the grid item. Is this possible on a CMS page using the multiple image block?
Something like this where there is one longer image in the middle of the grid.
Or like this with a portrait photo stretched over 2 rows.
have a look at this - I think this what you wantedâŚ
Yes I am aware you can make a collection list a grid, which is what Iâve already done, so that doesnât answer my question. If you look at the images you can see what I am trying to accomplish.
if i understand correctly you want to have some images span several columns - you can do that in a grid by going into grid edit mode and click+drag the image corner to cover two cells in the gridâŚ
see
Again, I understand that you can do this on a normal page with a regular grid. I am specifically asking about CMS pages only. Has anyone found a work around with dragging the corners of grid elements using the multi-image function on a CMS item?
It looks like it is not a feature that is available in webflow currentlyâŚ
Yeah I figured it wasnât. Soon hopefully but in the meantime I figured out a little work around. Thanks!
Hey Ryan, Iâm trying to accomplish this same thing - Mind if I ask how to made it work? You can email me at tyler@madebyafterhours.com as well. Happy to pay you a consulting fee if needed as well.
Just shot you an email!
Hi, trying something similar. Did you manage to get it working?
So I wanted three separate grid layouts for my collections on my website. In order to do this I had to make 3 collections which I named Projects A, B, and C.
What I did was in each collection I made an image field labeled with the kind of photo I needed in that position.
In project A I created 2 multi image fields. The top field was to be filled with 4 - 2:1 ratio portrait photos that would sit on top of the lower grid. The bottom field held the rest of the photos used in that collection. I used 16:9 ratio and 4:5 ratio for the photos in each of my collections but if one image was 16:9 every image in that field had to be 16:9 in order to keep a clean and consistent look.
In Project B I used 3 single image fields and 1 multi image. 1 single was called âPortrait leftâ, another âLandscape Middle Imageâ, and the last âPortrait Rightâ. Then, the multi image field was used for the rest of that projects photos.
Project C was similar to B but with different names in the single image fields because C projects had a different look in their grid.
Lastly, for each collection page, I made 2 grids. The top one was just div blocks with background images set to âcoverâ that I placed and shaped on the grid and the bottom grid was the multi image field that auto-populates those images.
Getting the top grid to work without bugging out on different screen sizes took a little bit of trial and error but if you do everything cleanly the first time, unlike me, you should be fine haha.
Here is the website for this:
Feel free to poke around the different projects to see the grid working in full effect!
I hope my instructions were clear enough but donât hesitate to ask any questions!
Wow this seems complex. So currently its seems you can use the multi-image field (to save on fields + add alt text all within one field itemâŚ) but you can only set the grid to be of a linear patterned grid. I wanted a masonry style grid. ie. 2 images x 1 image x 2 images etcâŚany chance of sharing your read only webflow link so we can have a look how you did thisâŚor any developmens on doing this would be much appreciated. Cheers
Hey there!
Sorry for the late reply - here is the read only link: https://preview.webflow.com/preview/material-contours?utm_medium=preview_link&utm_source=dashboard&utm_content=material-contours&preview=fe8ea95aea8db8ba27c99ca4f121b398&mode=preview
If you go into the CMS and look at âProjects Bâ and âProjects Câ you can see how I broke up the grid and how each image was labeled. Then, if you go the that projects CMS page you can see how the grid layout works.
Let me know if you have any questions!
Hi there!
I have made a masonry layout in the past for a client, it is simple to do by using text columns.
If you click on âcollection listâ which is in âcollection list wrapperâ then scroll down to the typography properties you can see that I used 3 columns in the âmore type optionsâ.
I hope this helps 
link: https://preview.webflow.com/preview/ms-cars-executive-travel?utm_medium=preview_link&utm_source=designer&utm_content=ms-cars-executive-travel&preview=52845ec3b56ea752b6252b424f1181da&pageId=5d1e562dbb9c4fc191b3d8ce&mode=preview
