Broken Grid
Broken grid gallery with asymmetric layout.
Main Features of Broken Grid
How to Use Broken Grid in Next.js
Installation Guide for Broken Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...array of image URLs] | Array of image source URLs. |
backgroundColor | string | #050505 | Background color (hex, rgb, or hsl). |
textColor | string | #ffffff | Text color (hex, rgb, or hsl). |
borderColor | string | rgba(255,255,255,0.1) | Border color (hex, rgb, or rgba). |
exploreText | string | Explore | Text displayed in the explore section. |
Related Components
When to Use
Excellent for technical portfolios, edgy agencies, and Next.js platforms that want a dramatic 'Broken Grid' aesthetic. Use this layout to communicate structural scale and digital craft through architectural modules.
Best Practices
Maintain consistent spacing within your design system by using variable, organic grid gaps. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by using efficient image textures.
Why This Component Matters in Modern UI Development
Broken layouts communicate power, mystery, and structural honesty. This production-ready UI template helpsคุณ build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
Frequently Asked Questions
QHow is it 'Broken'?
The grid uses non-uniform column spans and staggered vertical offsets (y-translation) to simulate the raw structural honesty of architectural blueprint failures.
QCan I add more text?
Absolutely, while optimized for high-contrast imagery, you can expand the text cards to include project descriptions or technical metadata.
QIs it mobile responsive?
The grid's asymmetric spans adapt dynamically for mobile, Ensuring the structural narrative remains impactful on small screens.