Card Layouts in Framer (Grid Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ก.ย. 2024

ความคิดเห็น • 28

  • @paulkelley5100
    @paulkelley5100 6 หลายเดือนก่อน +4

    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
    @checkout-page ปีที่แล้ว +3

    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
      @TimGabe  ปีที่แล้ว

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

  • @erick.webdev
    @erick.webdev 4 หลายเดือนก่อน

    bro is a great teacher 🙏

  • @handymads
    @handymads 11 หลายเดือนก่อน +2

    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
      @TimGabe  11 หลายเดือนก่อน

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

    • @handymads
      @handymads 11 หลายเดือนก่อน

      @@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.

  • @backupbackb.u.b136
    @backupbackb.u.b136 7 หลายเดือนก่อน

    This was extremely helpful. Thank you!!

    • @TimGabe
      @TimGabe  7 หลายเดือนก่อน

      glad it was!! thanks 😃

  • @RealMehedi
    @RealMehedi ปีที่แล้ว +1

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

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      i heard you, my friend!!

  • @the_slidemaster
    @the_slidemaster 9 หลายเดือนก่อน +2

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

    • @TimGabe
      @TimGabe  9 หลายเดือนก่อน +1

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

    • @the_slidemaster
      @the_slidemaster 9 หลายเดือนก่อน

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

  • @user-st9uz2ij9y
    @user-st9uz2ij9y ปีที่แล้ว +2

    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
      @TimGabe  ปีที่แล้ว +1

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

  • @evanbates4097
    @evanbates4097 4 หลายเดือนก่อน +1

    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.

    • @deniseklaasman7629
      @deniseklaasman7629 4 หลายเดือนก่อน

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

  • @user-se3yi1ic5o
    @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'

  • @carolinadelsur6411
    @carolinadelsur6411 7 หลายเดือนก่อน

    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
      @DevikaMallikDesigns หลายเดือนก่อน

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

  • @Kluucy894
    @Kluucy894 ปีที่แล้ว +1

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      ❤️😍

  • @hfromero
    @hfromero 8 หลายเดือนก่อน

    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
      @TimGabe  8 หลายเดือนก่อน

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

  • @LorettaBangBang
    @LorettaBangBang 6 หลายเดือนก่อน

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

  • @m1khaild154
    @m1khaild154 3 หลายเดือนก่อน

    link is empty

  • @em.a.httpss
    @em.a.httpss 4 หลายเดือนก่อน

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