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
