Bento Grid
The component is a flexible grid layout that allows for dynamic placement of elements, enabling customization of grid items' width and height. It's ideal for creating responsive, visually appealing grids that adjust seamlessly across various screen sizes.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
API
| Name | Type | Default | Description |
|---|---|---|---|
| gridCols | number | 4 | Number of columns |
| items | array | Items for the grid ordered by ascendant | |
| rowHeight | number | 100 | single row height as pixels |