start

installation

general

button icon style animation

layout

grid flex center space divider

data display

tooltip tab

grid

Basic usage

import {Grid} from "tuix-design"

Simple Grid

Column props define de number of grid's column.

<Grid column={3}>
    <Box bg="blue" height={100} />
    <Box bg="blue" height={100} />
    <Box bg="blue" height={100} />
    <Box bg="blue" height={100} />
</Grid>

Autorows set all grid's child height.

<Grid column={3} autoRows={100}>
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
</Grid>

AutoCols sets a size for the columns in a grid.It affects only columns with the size not set

<Grid column={3} autoRows={100}>
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
</Grid>

templateColumns

<Grid templateColumns="20px 100px 200px" autoRows={100}>
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
</Grid>

templateRows

<Grid templateRows="100px 50px 20px">
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
</Grid>

gap

<Grid column={3} autoRows={100} gap={20}>
    <Box bg="blue" />
    <Box bg="blue" />
    <Box bg="blue" />
</Grid>

Grid Item

<Grid templateColumns="auto auto auto">
<GridItem col="1 / 3">
            <Box bg="red" height={100} />
    </GridItem>
<GridItem>
            <Box bg="blue" height={100} />
</GridItem>
    <GridItem>
            <Box bg="blue" height={100} />
    </GridItem>
</Grid>

Grid Area

<Grid templateAreas='"red blue" "green green"'>
<GridItem area="red">
<Box bg="red" height={100} />
</GridItem>
<GridItem area="blue">
<Box bg="blue" height={100} />
</GridItem>
<GridItem area="green">
<Box bg="green" height={100} />
</GridItem>
</Grid>

Grid props

props	type	status	default	description
column	number	optional	1	Grid column number
templateColumns	string \| number	optional	null	The number (and the widths) of columns in a grid layout
templateRows	string \| number	optional	null	The number (and the heights) of the rows in a grid layout
autoRows	string \| number	optional	null	Rows's size
autoCols	string \| number	optional	null	Columns's size
templateAreas	string	optional	null	areas within the grid layout
gap	number	optional	5	the gap between the rows/Columns in a grid layout

Grid Item props

props	type	status	default	description
gridColumn	string \| number	optional	null	grid item's size and location in a grid layout
gridRow	string \| number	optional	null	grid item's size and location in a grid layout
gridArea	string \| number	optional	null	grid item's size and location in a grid layout

animationprev

flexnext

basicsimple gridtemplateColumnstemplateRowsgapgrid itemgrid areagrid apigrid item api