Grid-Layout with CMS

Is there a way a to design a grid-layout with cms like that: ? I mean: different sizes of collection-items…


This israther just a manuel layout. Doing this with Collection items is possible, if you use several lists that are displaying different range of posts.

Custom code can also be use to target individual items in a List.

Hi, is it possible for an item (e.g. feature image) from a CMS Collection be displayed in differing sizes? Screenshot from the designer attached. He intends for the featured image of the last five posts to be presented in this grid which has differing spans.

At them moment, spanning one item spans every item. At the moment, the only way I can think is to call the same list five times, once in each box and use filtering to pick the post.

My link, for what it’s worth :slight_smile: Any help appreciated.

Dev page is my try out section.

Hint: you can have a grid made of multiple collection lists. Each collection list will be set to display a limited number of items and the “starting at” value will be well chosen so that all items are shown.

Does this make sense? I can totally enter into further details, but maybe that’s enough for you to get creative already…

Hi Vincent, that’s great. I get where you’re going with this and that makes sense.

I’m trying to create the grid with overlays so that each image feeds back to the relevant blog post. I’m first trying to get the following grid to work as a start.

This is what, I have but I’ve two issues;

  1. I set the images to 100% height using a class and use fit:cover but the images are coming out tall full height. I’ve set a height for the grid and 1FR on rows but it’s not coming out as a square-ish grid. I’m missing something fundamental because it works on the tutorial video.

  2. I’d like the magnifying glass to disappear with the colour overlay but hidden on ‘hover’ state seems to hide is permanently.

Once I can crack the static images, I’ll move on to the CMS-driven version described above :slight_smile:

Thanks for your help.