Responsive Grid Layout
Build a responsive CSS Grid layout with gap, auto-fit columns, and proper alignment.
何时使用此配方
Use this for product grids, blog post listings, portfolio galleries, or any content that needs to adapt from 1 column on mobile to 3-4 columns on desktop.
步骤
常见问题
When should I use Grid vs Flexbox?
Use Grid for 2D layouts (rows AND columns), Flexbox for 1D layouts (row OR column). Grid is better for page layouts, Flexbox for component alignment.
How do I handle different card heights?
Use grid-auto-rows: minmax(200px, auto) to set a minimum height while allowing taller cards to expand.
相关配方
Complete Button Style
Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.
Hero Section Design
Design a stunning hero section with gradient background, flexbox centering, and entrance animation.
Card Component Style
Build a modern card component with shadow, border radius, hover transform, and smooth transitions.
Glassmorphism Effect
Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.