Bento Grid
Bento Grid, container with multiple variants and displays, five cells by default, four cells, and three cells.
Installation
Usage
can be used as a component <GridBento /> or as a style via bentoGridVariants style object.
<GridBento className="h-screen py-12 px-6 w-full place-content-center place-items-center">
{IMAGES.map((imageUrl, index) => (
<div key={index} className="overflow-hidden size-full rounded-xl shadow-xl">
<img className="size-full object-cover" src={imageUrl} alt="tokyo" />
</div>
))}
</GridBento>Examples
Four Cells
Three Cells
Props
| Prop | Type | Default |
|---|---|---|
variant? | default | threeCells | fourCells | default |