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.
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.
And next, you can copy the code below and paste it into your dopest component folder.
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.
Collections
You might wanna render this grid on the fly for stuff like articles, podcasts, or whatever. It's a breeze to just toss in items as props like this. Not sure why we roll with collections? Check it out here.
Understanding React Hooks
Get the lowdown on React Hooks, how to use 'em, and best practices for those sleek functional components.Mastering TypeScript
Dive deep into TypeScript, from basic stuff to pro features, for building rock-solid apps.Laravel Eloquent Tips
Check out advanced tricks for using Laravel Eloquent ORM to make your database game strong.Building with Next.js
A full-on tutorial on creating server-rendered React apps with the Next.js framework.Inertia.js for Full-Stack Devs
Learn how Inertia.js smooths out the gap between client-side frameworks and server-side apps.Optimizing Web Performance
Tips and tricks to boost the performance and speed of your web apps.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. |