Bento Grid
Description
The Bento Grid component is a versatile layout tool designed to create responsive grid structures. It allows for the creation of Bento-style designs, where content is displayed in a modular, card-like format. This component is particularly useful for creating visually appealing and organized layouts for various types of content, such as dashboards, portfolios, or content showcases.
Installation
bash
sabaccui add bentoGrid
Usage
The Bento Grid component can be configured with different numbers of columns and can contain multiple Bento GridItem components.
Example with 3 columns:
Preview
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Example with 2 columns:
Preview
Grid item 1
Grid item 2
Grid item 3
Grid item 4
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
items | bloks | An array of BentoGridItem components to be displayed in the grid. | - |
cols | number | The number of columns in the grid layout. Minimum value is 1. | 1 |
Related Components
Notes
- The component uses Tailwind CSS classes for responsive grid layouts.
- The number of columns is limited to a maximum of 10 in the current implementation.
- The
getItemClassfunction is defined but not implemented in the provided code. It can be used to apply custom classes to individual grid items based on their content or position.
Best Practices:
- Consider the content and screen sizes when choosing the number of columns.
- Use Bento GridItem components consistently within the Bento Grid for a uniform appearance.
- Ensure that the content within each Bento GridItem is responsive and adapts well to different grid configurations.
- Test the layout across various screen sizes to ensure a good user experience on all devices.