BentoGrid

BentoGrid is a responsive grid container for the "bento box" layout style — tiles of varying sizes packed into a cohesive grid. Set the base columns count (2, 3, 4, or 6); the grid collapses to a single column on small screens and scales up at breakpoints. Each child is a BentoCard that declares its own colSpan and rowSpan. Great for dashboards and marketing feature sections.

Example

import { BentoGrid, BentoCard } from '@officina/ui';

<BentoGrid columns={4}>
  <BentoCard colSpan={2} rowSpan={2}>
    Featured
  </BentoCard>
  <BentoCard colSpan={2}>Wide</BentoCard>
  <BentoCard>Metric</BentoCard>
  <BentoCard>Metric</BentoCard>
</BentoGrid>;

API