Carregando…Carregando…Carregando…Carregando…CSS grid bento layout with configurable column/row spans and gap.
Bento Grid — flexible CSS grid with col/row spans
Featured Item
This cell spans 2 columns and 2 rows
Analytics
Status
Wide card — spans full row
Bento Grid — cols=4
cols=4, colSpan=4 — full-width row
colSpan 2
colSpan 2
$ npx kikitocn add bento-grid@/lib/utilsimport { BentoGrid } from "@/components/ui/cn/bento-grid/BentoGrid";
export function BentoGridExample() {
return (
<BentoGrid />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
items* | BentoItem[] | — | Itens: { id, colSpan?: 1|2|3|4, rowSpan?: 1|2, className?, children? } |
cols | 3 | 4 | 3 | Número de colunas do grid |
gap | number | 16 | Espaço entre os itens em px |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro container |