Streaming live at 10am (PST)

How to make Pinterest style grid?

Can anybody help please? I’m trying to make Pinterest style grid with the new grid feature but no idea how to do it. I’ll PayPal a tip to anyone who helps me solve this, thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hey Khalada,

To create a similar look to pinterest’s look you don’t need grid. It will be much easier and simple to create equal width columns and in each column insert different height elements.

Here is a clonable example:

Thanks you for sharing with us. Is this possible to connect collection to this type of grid?

Yes, but it will need some tweakings…
You will have to use a few different lists with conditional visibility and/or limit items. Each list will be a column.

Thank you but still unsure how can I set different height of elements in a column is a collection list? As setting a height to collection item sets it to all? I am trying to manage this to work with a collection. Tried grid so far - it works better so I can set width I want and it is responsive. But cant manage different height of elements.

If you want to set variable height to the elements you will have to use custom code. But, the hole idea of the pinterest like grid, is that it’s height is auto adjusted by content, right?
Here is an explanation about variable width in cms items that can be also applied to height.

1 Like

In my case I wanted this to be dynamic so neither which collection item appears if it is in the 3x3 matrix element #1 in first row it dynamically gets this height, # 2 gets another height, and # 3 gets his own height. Next row there are different heights, and third row also different heights. But the idea that the column with 3 rows always same height as other columns. So can’t use this trick with css custom code as my items should get height dynamically depending on the position of the 3x3 matrix so with the help of your pinterest cloneable example I can set what I want but unsure how then I can move it to get items from collection