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.

Preview

Code

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.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

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.

Preview

Code

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.

Preview

Code

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.

Preview

Code

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.

Preview

Code

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.

Preview

Code

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.

Preview

Code

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.

Card Separator