Layout

GridItem

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

import { GridItem } from '@lostgradient/cinder/grid-item';
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/grid';
</script>

<Grid columns={12}>
  <Grid.Item span={6}>Half width</Grid.Item>
  <Grid.Item span={6}>Half width</Grid.Item>
</Grid>
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 Required Bindable Description
span number | string Number of columns this item spans.
columnStart number | string Explicit grid-column-start value.
columnEnd number | string Explicit grid-column-end value.
rowSpan number | string Number of rows this item spans.
rowStart number | string Explicit grid-row-start value.
as NonVoidHTMLElementTagName 'div' Rendered HTML tag.
children snippet req Grid item contents.