Overview
A raw, editorial-style asymmetrical grid. This "Tactile Brutalism" approach breaks traditional 12-column layouts by allowing items to span irregular columns and rows, with custom offset transforms to create intentional overlaps.
Usage
import { BrokenGrid, BrokenGridItem } from "@/components/creative/broken-grid"
<BrokenGrid columns={12} gap={4}>
<BrokenGridItem colSpan={6} rowSpan={2} zIndex={10}>
<img src="/hero.jpg" alt="" />
</BrokenGridItem>
<BrokenGridItem
colStart={5}
colSpan={4}
offsetX="-20px"
offsetY="40px"
zIndex={20}
>
<div className="bg-white p-6 shadow-xl">
Overlapping Text Box
</div>
</BrokenGridItem>
</BrokenGrid>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { BrokenGrid } from "@/components/creative/broken-grid";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { BrokenGrid } from "@/components/creative/broken-grid";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<BrokenGrid
columns{10}
gap{10}
animate{true}
>
<div>Content goes here</div>
</BrokenGrid>
</div>
);
}