Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
Grid
Check out this Responsive Grid component! It adjusts columns and gaps for any device, enhancing your UI’s vibe and usability across all screen sizes.
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
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
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 | Description |
|---|---|---|
| columns | number | object | Defines the number of columns in the grid. Can be a number or an object with breakpoints. |
| gap | number | object | Defines the gap between each item in the grid. |
| gapX | number | object | Defines the gap between each item in the grid on the x-axis. |
| gapY | number | object | Defines the gap between each item in the grid on the y-axis. |
| flow | 'row' | 'col' | 'rowDense' | 'colDense' | 'dense' | Defines the flow direction of the grid. |
| rows | number | object | Defines the number of rows in the grid. |
| debug | boolean | Adds a border around each item in the grid. |
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 | Description |
|---|---|---|
| colSpan | number | object | Defines the number of columns the item spans. Can be a number or an object with breakpoints. |
| rowSpan | number | object | Defines the number of rows the item spans. Can be a number or an object with breakpoints. |
| colStart | number | object | Defines the column the item starts at. Can be a number or an object with breakpoints. |
| colEnd | number | object | Defines the column the item ends at. Can be a number or an object with breakpoints. |
| rowStart | number | object | Defines the row the item starts at. Can be a number or an object with breakpoints. |
| rowEnd | number | object | Defines the row the item ends at. Can be a number or an object with breakpoints. |