Card Layouts in Framer (Grid Tutorial)
Вставка
- Опубліковано 9 лип 2024
- Grids and responsive card layouts in Framer can be tricky if you don't set it up the right way. In this tutorial, you'll learn the perfect setup in just 3 minutes.
🔴 Working File: timgabe.com/resources/bento-g...
Timecodes
0:00 - Introduction to Framer tutorial
0:11 - Starting with grid items creation
0:26 - Making the "card" frame with details
1:17 - Finalizing card design & color adjustments
1:45 - Initiating the desktop grid setup
2:18 - Advanced grid settings & device-specific layouts
2:46 - Customizing grid columns & individual card adjustments
#framer #framertutorial
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 :) .
bro is a great teacher 🙏
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.
was a new one for me too while researching the video!
This was extremely helpful. Thank you!!
glad it was!! thanks 😃
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?
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.
how do you mean with components? using grids inside of components, or adding components to grids?
@@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.
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.
Erman, my brother!!
as far as I know, I'm afraid not... this is something we can only achieve using Stacks currently
Thanks tim.. You heard me I guess. Very useful.
i heard you, my friend!!
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.
masonry.framer.wiki/ Is this it? I've been looking for the same gallery...
Hey Tim. Just a quick question. Where can I get those awesome image used in this vid. ✨
the images are from midjourney! 😃 maybe i should make a video on midjourney creation in the future!
@@TimGabe Yep. That'd be useful. Is that free?
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?
no worries 😃 if i understand you correctly, i don't think you can do that without creating layered stacks with padding!
❤
❤️😍
link is empty
This feature is super unintuitive in Framer. Why cant I visually SEE the grid, like in Webflow? Makes no sense.
this is awesome. unfortunately it completely breaks when you turn the card into a component in classic framer fashion 🫠