Layout

GridItem

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

import { GridItem } from '@lostgradient/cinder';
layoutgrid
01

Overview

GridItem is the optional Grid.Item placement leaf. Use it when a grid child needs to span tracks or start at a specific track.

Usage

svelte 
<script lang="ts">
  import { Grid } from '@lostgradient/cinder';
</script>

<Grid columns={12}>
  <Grid.Item span={6}>Half width</Grid.Item>
  <Grid.Item span={6}>Half width</Grid.Item>
</Grid>

Combine span, rowSpan, and rowEnd to build an asymmetric mosaic layout — a tall, wide featured tile alongside regular ones — without a separate layout component:

svelte 
<Grid columns={4} gap="var(--cinder-space-4)">
  <Grid.Item span={2} rowSpan={2}>Featured tile</Grid.Item>
  <Grid.Item span={2}>Regular tile</Grid.Item>
  <Grid.Item span={2}>Regular tile</Grid.Item>
</Grid>

rowEnd takes precedence over rowSpan when both are set on the same item, so use whichever reads more clearly for a given tile: a span count for "how many rows," or an explicit end line for "stop at this row."

02

When to use

Use when
  • A child in a grid needs to span tracks or start at a specific track.
Avoid when
  • Every child can use default grid auto-placement - render plain children inside Grid instead. Use Grid instead
03

Props

Props for grid-item
Name
Type
Default
Description
span number Number of columns this item spans.
columnStart number Explicit grid-column-start value.
columnEnd number Explicit grid-column-end value.
rowSpan number Number of rows this item spans.
rowStart number Explicit grid-row-start value.
rowEnd number Explicit grid-row-end value. Takes precedence over rowSpan when both are set.
as NonMetadataHTMLElementTagName 'div' Rendered HTML tag.
children required snippet Grid item contents.