Grid

Description

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

Demo

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

Live Editor

<Grid gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap={20}> <GridItem> <DemoBox /> </GridItem> <GridItem> <DemoBox /> </GridItem> <GridItem> <DemoBox /> </GridItem> </Grid>

<Grid gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap={20}>
  <GridItem>
    <DemoBox />
  </GridItem>
  <GridItem>
    <DemoBox />
  </GridItem>
  <GridItem>
    <DemoBox />
  </GridItem>
</Grid>

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Box		Box

Name	CSS Rule(s)	Description
gridTemplateColumns	grid-template-columns	Sets the component's grid-template-columns
gridColumn	grid-column	Sets the component's grid-column
gridRow	grid-row	Sets the component's grid-row
gap	gap	Sets the component's gap
rowGap	row-gap	Sets the component's row-gap
columnGap	column-gap	Sets the component's column-gap
gridAutoColumns	grid-auto-columns	Sets the component's grid-auto-columns
gridAutoFlow	grid-auto-flow	Sets the component's grid-auto-flow
gridAutoRows	grid-auto-rows	Sets the component's grid-auto-rows
gridTemplateRows	grid-template-rows	Sets the component's grid-template-rows