Hi all,
I have been wrecking my head for the past couple of days on a problem when I have added a grid to my Collection List.
Currently, all the list items appear in a linear fashion across the grid - as it is supposed to do. What I would like to achieve is to position each grid-children/list item with its own grid-column-start/end & grid-row-start/end.
However, I can’t seem to work out how how do I specify the grid-column-start, grid-column-end, grid-row-start, grid-row-end to each child within the grid. Is this something that is achieved through custom code or through the user-interface within webflow?
The simple no code approach here is to use multiple instances of the same collection list with each limited to show the desired image. IT would be good if CMS items aligned with grid areas, but it isn’t a thing.
Hey Hamish,
Thanks for your reply, so how would you achieve this programmatically?
I did a quick scan of that site using DevTools in Chrome but couldn’t find any code that sets grid-column-start/end etc. Hence why I am even more stumped.
Thanks for the link to Offset Grid CMS items. I had look at it and didn’t realise it was a matter of setting the n-th child. I do think the website I am referencing must have manually added the CSS items. Hard coding CSS items does make it prone to breaking and reduces extensibility.
Looks like I can give this a go-over the weekend and get my subscription to WebFlow started.
Oh that looks really good. I will give it a try as well at some stage. @Finsweet resources are great.
The Grid columns are present on that site in the home project wrapper class.
I think this site could be done without any custom code. Using different sized images and or adding multiple image fields in the collection. So have a micro image, large image, no left margin etc. . Then you tweak the grid item positioning and likely use conditional visibility. You could also use a couple of different collections lists if you need a full width image here and there.
I did a quick demo of a no code, one collection list contemporary grid for you.I would probably create a second collection for project images with a dropdown position select field in hindsight.
Hi Hamish,
I can’t thank you enough for making this demo for me as it has helped me a lot in understanding the problem. A few things you did, I had not even previously thought about doing at all. Plus learnt a couple of new things about collection lists.
I have to say whoever designed this template has an interesting approaching. It is fairly nested but the beauty is to avoid hard-coded values. The key has been the alignment and justify parameters of the div, Project Wrap.
I blew out my afternoon with ease by looking into all this since I can’t leave my house unlike WA
Well I finally worked it out how the website I had referenced in my initial post had laid out the images across the grid.
The trick was to have a Grid as a parent and then create a grid child. I had specified 7 columns for my grid and rows were automatically created.
In my case the child’s container was a DIV block (Grid Project). The div block’s Column Start/End and Row Start/End coordinates can be specified. The Grid Project also need’s its own Collection List.
Access the Collection List’s Settings menu and specify the Limit Items attribute. This way you can specify only one item to display and the exact item from the CMS to be fetched. See the attached image.
Can’t believe it took me so long but it is interesting how simple things are and that you don’t need to go down the route of custom code etc. I need to follow the KISS principle - Keep It Simple Stupid
