Dynamic Grid
Framer component for 1-8 dynamic cards. Offers expandable detail views, navigation, and full customization of layout, text, colors, and visual effects.
Make it with Workshop
Build your own component with AI
Framer component for 1-8 dynamic cards. Offers expandable detail views, navigation, and full customization of layout, text, colors, and visual effects.
Make it with Workshop
Build your own component with AI
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.
