Layout

BentoCell

Optional placement child for BentoGrid that controls row and column spans or explicit track placement.

import { BentoCell } from '@lostgradient/cinder/bento-cell';
layoutgridbento
01

Overview

BentoCell controls row and column placement for one tile inside a BentoGrid.

Usage

svelte 
<script lang="ts">
  import { BentoGrid } from '@lostgradient/cinder/bento-grid';
</script>

<BentoGrid columns={4} gap="var(--cinder-space-4)">
  <BentoGrid.Cell columnSpan={2} rowSpan={2}>Featured tile</BentoGrid.Cell>
  <BentoGrid.Cell>Standard tile</BentoGrid.Cell>
</BentoGrid>
02

When to use

Use when
  • A tile in BentoGrid needs to span multiple tracks or start at a specific track.
Avoid when
03

Props

Props for bento-cell
Name Type Default Required Bindable Description
columnSpan number | string Number of columns this cell spans.
rowSpan number | string Number of rows this cell spans.
columnStart number | string Explicit grid-column-start value.
columnEnd number | string Explicit grid-column-end value.
rowStart number | string Explicit grid-row-start value.
rowEnd number | string Explicit grid-row-end value.
as NonVoidHTMLElementTagName 'div' Rendered HTML tag.
children snippet req Bento cell contents.