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 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 visually optimized layouts for each count.
• Interactive Expandable Cards: Users can click any card to expand it into a focused, full-screen detail view with additional information.
• Intuitive Navigation: Browse between expanded cards using on-screen arrows, keyboard arrow keys, or a subtle horizontal drag gesture.
• Outside-Click Close: The expanded card can now be closed by clicking anywhere outside the card, offering a more natural and intuitive interaction.
• Smooth Animations: Powered by Framer Motion, featuring fluid transitions, hover effects, and a slight rotation animation when switching between expanded cards.
• Rich Content Display: Each card supports an image, a prominent title, and a detailed description (revealed when expanded).
• Visual Enhancements: Includes a subtle gradient and blur effect at the bottom of each card to improve 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, including:– Title (String)– Description (TextArea)– Image (ResponsiveImage)
• Gap (px): Controls spacing between cards.• Border Radius (px): Adjusts card corner roundness.• Title Font: Full control over typography for card titles.• Description Font: Full control over typography for descriptions.• Title Color: Sets title color.• Description Color: Sets description color.• Gradient Intensity: Adjusts gradient/blur strength for readability.• Gradient Position (%): Determines how high the gradient reaches.• Border (Toggle): Show or hide a subtle translucent border.• Border Width (px): Defines border thickness when enabled.• Shadow (Toggle): Adds or removes a subtle drop shadow.• Expanded Card Margin (px): Controls spacing between the expanded card and the viewport edges.
