GridItem

Description

A component that abstracts grid item functionality. All valid grid item dependent rules are implemented as props

Demo

import { GridItem } from "@neui/layout";

Live Editor

<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 1fr)"> <GridItem gridRowStart="3" gridColumnStart="1" gridColumnEnd="3"> <DemoBox /> </GridItem> </Grid>

<Grid gridTemplateColumns="repeat(3, 1fr)" gridTemplateRows="repeat(3, 1fr)">
  <GridItem gridRowStart="3" gridColumnStart="1" gridColumnEnd="3">
    <DemoBox />
  </GridItem>
</Grid>

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Box		Box

Name	CSS Rule(s)	Description
gridArea	grid-area	Sets the component's grid-area
gridColumnStart	grid-column-start	Sets the component's grid-column-start
gridColumnEnd	grid-column-end	Sets the component's grid-column-end
gridRowStart	grid-row-start	Sets the component's grid-row-start
gridRowEnd	grid-row-end	Sets the component's grid-row-end