Grid is a css layout for managing grid layouts
Usage
Import
import { Grid, GridItem } from '@passfort/castle'
Example
<Grid>
<GridItem p={2}>
<Item />
</GridItem>
<GridItem p={2}>
<Item />
</GridItem>
</Grid>
live example
Template Columns
<Grid templateColumns="repeat(5, 1fr)" gap={6}>
<GridItem w="100%" h="10" bg="N200" />
<GridItem w="100%" h="10" bg="N200" />
<GridItem w="100%" h="10" bg="N200" />
<GridItem w="100%" h="10" bg="N200" />
<GridItem w="100%" h="10" bg="N200" />
</Grid>
live example
Spanning Columns
<Grid
h="200px"
templateRows="repeat(2, 1fr)"
templateColumns="repeat(5, 1fr)"
gap={4}
>
<GridItem rowSpan={2} colSpan={1} bg="N200" />
<GridItem colSpan={2} bg="brand-blue" />
<GridItem colSpan={2} bg="brand-blue" />
<GridItem colSpan={4} bg="N300" />
</Grid>
live example
Starting and Ending Lines
<Grid templateColumns="repeat(5, 1fr)" gap={4}>
<GridItem colSpan={2} h="10" bg="N200" />
<GridItem colStart={4} colEnd={6} h="10" bg="N200" />
</Grid>
live example
Template Areas
<Grid
templateAreas={`"header header" "nav main" "nav footer"`}
gridTemplateRows={'50px 1fr 30px'}
gridTemplateColumns={'150px 1fr'}
h="200px"
gap="1"
color="black"
>
<GridItem p="1" bg="N200" area={'header'}>
Header
</GridItem>
<GridItem p="1" bg="N200" area={'nav'}>
Nav
</GridItem>
<GridItem p="1" bg="N200" area={'main'}>
Main
</GridItem>
<GridItem p="1" bg="N200" area={'footer'}>
Footer
</GridItem>
</Grid>
live example
