Card Layouts in Framer (Grid Tutorial)

[@paulkelley5100]

Great video, helped a lot. I believe someone mentioned something similar to what I'm struggling with. The spanning is a great feature, unless you want the image to retain its original ratio. In this case the item spanned would take up 2 columns and 2 rows. Unfortunately the next item in the 3rd column is pushed to the top row and the row below is blank and not able to be filled. I really wish Framer had a better solve for large image galleries with built in image enlargement, say, for a photographer portfolio :) .

[@checkout-page]

Awesome! Thanks for this video. I didn't realise you could add a column span to individual items in the grid. That's neat. If you want to accept payments in Framer, we have a no-code checkout page that you can easily embed.

[@TimGabe]

was a new one for me too while researching the video!

[@erick.webdev]

bro is a great teacher 🙏

[@handymads]

Thanks, this was helpful! I'm curious to know if this will work with components, too. In my humble experience it hasn't been as smooth of a ride.. yet.

[@TimGabe]

how do you mean with components? using grids inside of components, or adding components to grids?

[@handymads]

@@TimGabe Adding components to grids. In my experience, so far, adding components to grids warrants the option of letting the grid item/component stretch over multiple columns. Then again I haven't explored this extensively, so I might have missed something.

[@the_slidemaster]

Hey Tim. Just a quick question. Where can I get those awesome image used in this vid. ✨

[@TimGabe]

the images are from midjourney! 😃 maybe i should make a video on midjourney creation in the future!

[@the_slidemaster]

@@TimGabe Yep. That'd be useful. Is that free?

[@arunbeam6165]

@@the_slidemaster No bro. That's a paid tool

[@backupbackb.u.b136]

This was extremely helpful. Thank you!!

[@TimGabe]

glad it was!! thanks 😃

[@Shwemy99]

what if I want one of the grid cards to be 2 cards vertically?

[@RealMehedi]

Thanks tim.. You heard me I guess. Very useful.

[@TimGabe]

i heard you, my friend!!

[@ErmanMalak-m7z]

Great walkthrough, Tim! Would it be possible to have a card span two rows instead of two columns while keeping the rest of the cards in line with it? Or would that just push all the following rows down? Trying to figure that one out, but not sure if it's possible natively in Framer.

[@TimGabe]

Erman, my brother!! as far as I know, I'm afraid not... this is something we can only achieve using Stacks currently

[@evanbates4097]

But what about a masonry grid of just images where the images are proportional and responsive? I've been looking every where for just a simple gallery to upload images that's responsive and sizes my images properly with no luck.

[@deniseklaasman]

masonry.framer.wiki/ Is this it? I've been looking for the same gallery...

[@carolinadelsur6411]

Amazing tutorial, very easy to follow, thanks! I'm having a little trouble though. When I paste the cards into the grid, they're pasted in one column only, to the left side, even though it's set to two columns. Any ideas why?

[@DevikaMallikDesigns]

check that your width for each card is said to "fill"

[@hfromero]

thanks for the tip man. I was wondering how to add different gaps, horizontal and vertical, inside the grid or its just something you can do it only in figma?

[@TimGabe]

no worries 😃 if i understand you correctly, i don't think you can do that without creating layered stacks with padding!

[@user-se3yi1ic5o]

I'm adding content to my desktop, but it's not showing on my tablet and mobile. I've set everything to 'Fit Content'

[@Kluucy894]

❤

[@TimGabe]

❤️😍

[@m1khaild154]

link is empty

[@LorettaBangBang]

This feature is super unintuitive in Framer. Why cant I visually SEE the grid, like in Webflow? Makes no sense.

[@em.a.httpss]

this is awesome. unfortunately it completely breaks when you turn the card into a component in classic framer fashion 🫠