BentoGrid · @codigosinsiesta/theme

Demo

cols: 12 gap: 20px dense (grid-auto-flow)

Hero span 8×2

KPI 1 span 4×1

KPI 2 span 4×1

About span 6×2

Stat span 3×1

Tag span 3×1

CTA span 9×1

Los hijos de este demo son <div>s simulando cards — BentoCard llega en un PR aparte y encapsulará el patrón de grid-column: span N via su prop size.

Uso

page.svelte (Svelte 5)

<script>
  import { BentoGrid, BentoCard } from '@codigosinsiesta/theme/layout';
</script>

<BentoGrid cols={12} gap="24px" dense>
  <BentoCard size="xl" ariaLabel="Hero">...</BentoCard>
  <BentoCard size="md" ariaLabel="About">...</BentoCard>
  <BentoCard size="sm" ariaLabel="Stat">...</BentoCard>
</BentoGrid>

Nota: BentoCard llega en un PR aparte (issue #13). Mientras tanto, BentoGrid acepta cualquier hijo Svelte con grid-column: span N inline o vía clase propia.

API

Prop	Tipo	Default	Descripción
`cols`	`number`	`12`	Número de columnas del grid en desktop. Se aplica via `--csi-bento-cols`.
`gap`	`string`	`'20px'`	Espaciado entre celdas. Cualquier valor CSS válido (`px`, `rem`, `clamp(...)`). Se aplica via `--csi-bento-gap`.
`dense`	`boolean`	`true`	Si `true`, aplica `grid-auto-flow: dense` para compactar huecos cuando las cards tienen tamaños mixtos.
`ariaLabel`	`string`	`''`	Si se pasa, aplica `aria-label` al `<section>`. Útil cuando el grid es la región principal.
`children`	`Snippet`	—	Hijos del grid. Típicamente `BentoCard`s, pero acepta cualquier nodo.

Custom props expuestas

El componente expone dos CSS custom props en el style inline del <section>. Consumidores que necesiten variantes ad-hoc pueden overridearlas desde fuera con un selector más específico, o pasar nuevos valores via las props del componente.

Custom prop	Tipo	Default	Notas
`--csi-bento-cols`	`integer`	`12`	Número de columnas. Consumido por `grid-template-columns: repeat(var(--csi-bento-cols), 1fr)`.
`--csi-bento-gap`	`length`	`20px`	Gap entre celdas (row + column). Consumido por `gap`.

Responsive

BentoGrid colapsa la cuenta de columnas en dos breakpoints. Las BentoCard hijas se reorganizan automáticamente porque sus spans (definidos via la prop size) se aplican relativos al nuevo total de columnas.

Breakpoint	Cols efectivas	Caso de uso
`> 768px`	`cols` (default 12)	Desktop / tablet horizontal. Grid asimétrico real.
`<= 768px`	`4`	Tablet portrait / phablet. Las cards `xl` ocupan todo el ancho.
`<= 480px`	`2`	Móvil. Layout casi vertical, máximo 2 cards por fila.

CSS-only · sin JS

BentoGrid no tiene runtime de hidratación. Se renderiza completamente server-side y puede usarse en Astro sin ningún directivo client:*. Toda la lógica de layout (flujo dense, breakpoints responsive, gaps) vive en CSS Grid puro.

Esto lo hace ideal para landings estáticas: zero JS shipped al cliente para el container.

Casos de uso

Portfolio CsS: layout one-page con cards de tamaños mixtos (hero XL, about MD, KPIs SM).
Landings de talleres: secciones de features en grid asimétrico — el patrón típico bento.
Dashboards futuros: KPIs con tamaños variables (charts grandes + counters pequeños).
Galería de proyectos: thumbnails con featured items destacados (span 2×2 entre 1×1s).