Grid
A responsive layout system that organizes content into rows and columns, ensuring a seamless and adaptive user experience.
Basic
Grid's your go-to layout wizard, making it a breeze to whip up responsive and slick layouts. Whether it's jazzing up your blog, showcasing your portfolio, or rocking a landing page, this component keeps everything neat and stylish on any device.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Responsive
Grid's responsiveness is a breeze, with the ability to define your columns and gaps for any screen size. Whether you're designing for mobile, tablet, or desktop, Grid ensures that your content looks great on all devices.
This grid ain't got no default variants, so if you don't set an initial value, it's a big fat nothing. When you're
setting up a responsive prop like sm or md, make sure to slap an initial value for the breakpoint.
Gaps
Grid's gaps are configurable, allowing you to define the space between each item. Whether you're designing for mobile, tablet, or desktop, Grid ensures that your content looks great on all devices.
Gaps X and Y
Sometimes you need make diffrent gaps for the x and y axis. Grid's gapX and gapY props allow you to do just that.
Debugging
Sometimes you need to know what's going on in your grid. Grid has a debug prop that will add a border around each item.
Grid Item
Grid Item is the component that makes up the grid. It's a wrapper around the ListBoxItem component from react-aria-components. Grid Item has all the same props as ListBoxItem, but with a few extra props to help you define column and row spans.
I use that vibe on the Components page, where you can catch the link to the component's docs. What's the next step?
Props
Aight, just a heads up, all them props got that responsive mojo. You can tweak the prop for each breakpoint like a boss.
Grid
These props let you tweak the grid to your vibe.
| Property | Type |
|---|---|
| columns | string | number | object |
| gap | number | object |
| gapX | number | object |
| gapY | number | object |
| autoRows | 'auto' | 'min' | 'max' | 'fr' |
| autoColumns | 'auto' | 'min' | 'max' | 'fr' |
| flow | 'row' | 'col' | 'rowDense' | 'colDense' | 'dense' |
| rows | number | object |
| debug | boolean |
GridItem
Props like colSpan, rowSpan, colStart, colEnd, rowStart, and rowEnd let you position grid items exactly where you want 'em in the grid layout.
| Property | Type |
|---|---|
| colSpan | string | number | object |
| rowSpan | string | number | object |
| colStart | string | number | object |
| colEnd | string | number | object |
| rowStart | string | number | object |
| rowEnd | string | number | object |
| order | string | number | object |