Bento Grid

Layout

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

Instalação via CLI

$ npx kikitocn add bento-grid

Interno:

@/lib/utils

Exemplo de uso

Bento GridExample.tsx

import { BentoGrid } from "@/components/ui/cn/bento-grid/BentoGrid";

export function BentoGridExample() {
  return (
    <BentoGrid />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`BentoItem[]`	—	Itens: { id, colSpan?, rowSpan?, className?, children? }
`cols`	`3 \| 4`	`3`	Número de colunas do grid
`gap`	`number`	`16`	Espaço entre os itens em px

Carregando…