Grid

Used to manage grid layouts.

import { Box, Grid } from '@fidely-ui/react'

export const GridBasic = () => {
  return (
    <Grid columns={4}>
      <Box boxSize={'100px'} bg={'bg.emphasized'} />
      <Box boxSize={'100px'} bg={'bg.emphasized'} />
      <Box boxSize={'100px'} bg={'bg.emphasized'} />
      <Box boxSize={'100px'} bg={'bg.emphasized'} />
    </Grid>
  )
}

Usage

import { Grid, GridItem } from '@fidely-ui/react'

<Grid>
  <GridItem />
  <GridItem />
  <GridItem />
  <GridItem />
</Grid>

Examples

Col spans

Passn the colSpan prop to GridItem to span across columns.

import { Box, Grid, GridItem } from '@fidely-ui/react'

export const GridSpans = () => {
  return (
    <Grid columns={4} gap="6">
      <GridItem colSpan={2}>
        <Box h="20" bg={'orange.9'} />
      </GridItem>
      <GridItem colSpan={1}>
        <Box h="20" bg={'orange.9'} />
      </GridItem>
      <GridItem colSpan={1} bg={'orange.9'}>
        <Box h="20" />
      </GridItem>
    </Grid>
  )
}

Spanning Columns

In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution

rowSpan=2

colSpan=2

colSpan=4

import { Flex, Grid, GridItem } from '@fidely-ui/react'

export const GridSpanColumns = () => {
  return (
    <Grid
      h="250px"
      gridTemplateRows="repeat(2, 1fr)"
      gridTemplateColumns="repeat(5, 1fr)"
      gap={4}
    >
      <GridItem rowSpan={2} colSpan={1} bg={'bg.emphasized'}>
        <Flex align={'center'} justify={'center'} h={'100%'}>
          rowSpan=2
        </Flex>
      </GridItem>
      <GridItem colSpan={2} bg={'bg.emphasized'}>
        <Flex align={'center'} justify={'center'} h={'100%'}>
          colSpan=2
        </Flex>
      </GridItem>
      <GridItem colSpan={2} bg={'bg.emphasized'}>
        <Flex align={'center'} justify={'center'} h={'100%'}>
          colSpan=2
        </Flex>
      </GridItem>
      <GridItem colSpan={4} bg={'bg.emphasized'}>
        <Flex align={'center'} justify={'center'} h={'100%'}>
          colSpan=4
        </Flex>
      </GridItem>
    </Grid>
  )
}

minChildWidth

The minimum width of the child elements before wrapping (must not be used with columns).

import { Grid, GridItem } from '@fidely-ui/react'

export const GridMinWidth = () => {
  return (
    <Grid color="white" w="100%" minChildWidth="100px">
      <GridItem bg={'orange.9'} p={2} color="black">
        1
      </GridItem>
      <GridItem bg={'black.alpha10'} p={2}>
        2
      </GridItem>
      <GridItem bg={'blue.10'} p={2}>
        3
      </GridItem>
      <GridItem bg={'purple.9'} p={2} color="black">
        1
      </GridItem>
      <GridItem bg={'red.10'} p={2}>
        2
      </GridItem>
      <GridItem bg={'green.9'} p={2}>
        3
      </GridItem>
      <GridItem bg={'orange.9'} p={2} color="black">
        1
      </GridItem>
      <GridItem bg={'blue.9'} p={2}>
        2
      </GridItem>
      <GridItem bg={'purple.9'} p={2}>
        3
      </GridItem>
    </Grid>
  )
}

The Grid component accepts the following properties:

columns: The number of columns in the grid.

gap: The gap between the elements in the stack.

columnGap: The gap between the elements in the stack horizontally.

rowGap: The gap between the elements in the stack vertically.

minChildWidth: The minimum width of the child elements before wrapping (must not be used with columns).

The GridItem component accepts the following properties:

colSpan: The number of columns the item spans.

rowSpan: The number of rows the item spans.

rowStart: The row the item starts at.

rowEnd: The row the item ends at.

colStart: The column the item starts at.

colEnd: The column the item ends at.