Grid Item | Zalify UI

Span 2 columns

Span 1

React

Usage

import { Grid, GridItem } from '@zalify-ui/react'

<Grid columns={4} gap="4">
  <GridItem colSpan={2}>
    <div>Spans 2 columns</div>
  </GridItem>
  <GridItem colSpan={1}>
    <div>Spans 1 column</div>
  </GridItem>
  <GridItem colSpan={1}>
    <div>Spans 1 column</div>
  </GridItem>
</Grid>

Props

Prop	Default	Type
`colSpan`		`ConditionalValue<number>` The number of columns the item spans.
`rowSpan`		`ConditionalValue<number>` The number of rows the item spans.
`colStart`		`ConditionalValue<number>` The column start position.
`rowStart`		`ConditionalValue<number>` The row start position.
`colEnd`		`ConditionalValue<number>` The column end position.
`rowEnd`		`ConditionalValue<number>` The row end position.