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
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.