Collection Item size issues

I am playing around with blog layouts using collections. I have a layout where I want a full width card using 1 item from a collection on top and then the rest of the collections items to be half width cards below it.


I cant get the 2 column collection items to wrap because even though the project tile (the container that is styling the collection items) is set to less than 50% width of the container (small enough that two should fit per row and then wrap after that) the collection item seems to be getting additional width from somewhere. I can’t figure out where or why it is getting width from anything besides the styles in the project tile.


I think you just made the wrong one 45% -

I added flexbox and made a div one step higher 49% to make what you want :wink:

here is a screencapture

Gr Argogiant

Awesome, that makes perfect sense. Thanks for the help. I think I was looking at collections items a little bit wrong. Also, I like the loom screen cap video. Thanks makes it super easy to see what you are doing.

Do you know how to set a specific inside margin on a 2 column grid populated with content from a collection. In my (updated) link you can see I do have a margin between the two columns but only because each collection item is set to 49% width. Is there a way I can set the margin so it is exactly 30px?

My issue is that if I just put margins on the collection item the margin will also be on the outside of the columns and will no longer line up with the full width collection item at the top.


Cant you give the top section margin of 15px and the smallers ones also 15px?
I gave the project tile a margin of 15 that did it i think

like this :

Thanks for the help!