Bento Grid Layout
Apple-style asymmetric card grid with varied sizes.
Adjust the preview
Every choice updates the preview and the wording below.
Columns
Gap Size
Card Style
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a bento grid layout with 4 columns and medium 16px gaps. Cards span varying rows and columns for an asymmetric Apple-style design. Use elevated cards with soft shadows for card appearance. Implement with CSS Grid and grid-column/grid-row span rules. Make it responsive.
Paste it into Claude, Cursor, or v0 along with the context for your project.