CardGrid
Responsive grid layout for marketing cards with automatic mobile-to-desktop stacking. Configurable column count (2-4) and gap spacing with mobile-first responsive behavior.
Live Preview
Layouts
Feature Grid (3 columns)
Display features or services in a 3-column grid layout
AI-Powered
Let AI write your code while you focus on the business logic
Type-Safe
Full TypeScript support with automatic type generation
Responsive
Mobile-first design that looks great on all devices
Services Grid (2 columns)
Two-column layout ideal for service offerings or comparison
Web Development
Custom web applications built with modern technologies
Mobile Apps
Native and cross-platform mobile applications
Team Grid (4 columns)
Four-column layout perfect for team members or small items
Alice Chen
CEO
Bob Smith
CTO
Carol Davis
Designer
Dan Wilson
Engineer
Pricing
Pricing Grid
Three-column pricing grid with highlighted popular option
Hobby
For personal projects
Pro
For professional developers
Team
For growing teams
Customization
Custom Gap Size
Adjust spacing between cards with the gap prop
Ocean
Deep blue waters and marine life
Forest
Green canopies and wildlife
Desert
Golden sands and desert landscapes
Usage Guidance
✓ When to Use
Display multiple MarketingCard components, feature lists, benefits grids, or any content blocks that need consistent responsive grid layout on marketing pages.
✗ When NOT to Use
Don't use for data tables, complex multi-column layouts, masonry-style layouts, single-column content, or non-card content. Use CSS Grid or Flexbox utilities directly for custom layouts.
Props
columnsgapclassNamechildrenstyleonClickonChange