Broken Grid
Broken grid gallery with asymmetric layout.
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. |
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
Broken layouts communicate power, mystery, and structural honesty. This production-ready UI template helps you build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
FAQ
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.