---
title: "Dynamic Grid — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Iri Codes · Cards. Elevate your Framer projects with the Dynamic Grid, a powerful and versatile component designed to present your content in an engaging,…"
canonical: "https://framer.elliotli.dev/component/dynamic-grid"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Dynamic Grid

# Dynamic Grid

A dynamic grid with interactive card UI

[View on Framer](https://framer.com/marketplace/components/dynamic-grid/?via=elliot-li)

![Dynamic Grid preview image 1](https://framer.elliotli.dev/og/component/dynamic-grid/be67190ef195ae8d/1600x1200.jpg)

## Summary

Elevate your Framer projects with the Dynamic Grid, a powerful and versatile component designed to present your content in an engaging, interactive grid.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9992

## Details

- **Author**: Iri Codes
- **Price**: $4.00
- **Published**: 2025-10-24
- **Updated**: 2026-04-16
- **Added**: 2025-10-17
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator