57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:Tfd6,

Elevate your Framer projects with the Dynamic Grid, a powerful and versatile component designed to present your content in an engaging, interactive grid. Perfect for showcasing features, portfolios, product highlights, or blog posts, this component intelligently arranges 1 to 8 cards, offering a seamless user experience with beautiful animations and extensive customization.

What it does:

The Dynamic Grid transforms static content into a dynamic visual experience. It automatically adjusts its grid layout based on the number of cards you provide, ensuring an aesthetically pleasing arrangement from a single card to a full set of eight.

Key Features:

Responsive Grid Layout: Adapts intelligently for 1 to 8 cards, with pre-defined, visually optimized layouts for each count.
Interactive Expandable Cards: Users can click on any card to expand it into a focused, full-screen detail view, revealing more information.
Intuitive Navigation: Seamlessly browse between expanded cards using on-screen arrow buttons, keyboard arrow keys (left/right), or a subtle horizontal drag gesture.
Smooth Animations: Powered by Framer Motion, enjoy fluid transitions, hover effects, and a subtle rotation animation when navigating expanded cards.
Rich Content Display: Each card supports an image, a prominent title, and a detailed description (visible when expanded).
Visual Enhancements: Includes a subtle gradient and blur effect at the bottom of each card to enhance text readability over images.

Editable Variables (Property Controls):

Customize every aspect of your Dynamic Grid Showcase directly within Framer's properties panel:

Cards (Array, Max 8): Define the content for each card. Each card includes:
- Title (String): The main heading for your card.
- Description (String, TextArea): Detailed text that appears when the card is expanded.
- Image (ResponsiveImage): The background image for your card.
Gap (Number, px): Controls the spacing between individual cards in the grid.
Border Radius (Number, px): Adjusts the roundness of the corners for each card.
Title Font (Font Control): Full control over the font family, size, weight, letter spacing, and line height for card titles.
Description Font (Font Control): Full control over the font family, size, weight, letter spacing, and line height for card descriptions.
Title Color (Color): Sets the color of the card titles.
Description Color (Color): Sets the color of the card descriptions.
Gradient Intensity (Number): Adjusts the strength of the gradient and blur effect at the bottom of each card, making text more readable.
Gradient Position (Number, %): Determines how high the gradient and blur effect extends up the card from the bottom.
Border (Boolean): Toggle to show or hide a subtle, translucent border around each card.
Border Width (Number, px): (Visible when Border is "Show") Sets the thickness of the card border.
Shadow (Boolean): Toggle to show or hide a subtle drop shadow beneath each card.
Expanded Card Margin (Object, px): Defines the spacing (top, right, bottom, left) between the expanded card and the edges of the viewport, controlling its "modal" appearance.
Hide Title: The title can be hided from the cards until the mouse is hovering the card.

54:[["$","$L57",null,{"post":{"id":"019a14a7-13d3-731b-890b-44d340e67d52","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"50994d04-fe19-4e60-bb96-acd5a2541c87","name":"Iri Codes","slug":"iri-codes","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1407133/avatar-azXR51M6TUECLxr2u673xKgQrlaCwV.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YJdlPkXRuay6H9pGbpIP","resolved":true,"title":"Dynamic Grid","body":"$58","bodyJson":null,"introduction":"A dynamic grid with interactive card UI","slug":"dynamic-grid","author":{"framerUserId":"50994d04-fe19-4e60-bb96-acd5a2541c87","name":"Iri Codes","slug":"iri-codes","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1407133/avatar-azXR51M6TUECLxr2u673xKgQrlaCwV.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/YJdlPkXRuay6H9pGbpIP/dynamic-grid-1xula0WdzmY948o5DqRdRTmeJ7Nooy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-17T12:40:21.534Z","updatedAt":"2026-04-16T02:35:53.280Z","publishedAt":"2025-10-24T05:18:05.267Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://honest-guests-586568.framer.app","price":"4","paymentUrl":"https://iricodes.gumroad.com/l/dynamicgrid","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Va94Pt1S4OnnPhlA51uh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-24T05:18:05.267Z","updatedAt":"2025-10-24T05:18:05.267Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you