Grid

Grid is a layout for managing grid layouts

Template columns

Here’s an example of using grid template columns with the grid component, and applying a gap or space between the grid items.

import { Box, Grid, GridItem, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Grid h="200px" w="400px" templateColumns="repeat(5, 1fr)" gap={ThemeSpace.Small}>
      <GridItem>
        <Box w="100px" h="50%" bg="blue" />
      </GridItem>
      <GridItem>
        <Box w="100px" h="50%" bg="blue" />
      </GridItem>
      <GridItem>
        <Box w="100px" h="50%" bg="blue" />
      </GridItem>
      <GridItem>
        <Box w="100px" h="50%" bg="blue" />
      </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. To achieve this, you need to pass the colSpan prop to the GridItem component to span across columns and also pass the rowSpan component to span across rows. You also need to specify the templateColumns and templateRows.

import { Box, Grid, GridItem, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Grid
      h="200px"
      w="400px"
      templateRows="repeat(2, 1fr)"
      templateColumns="repeat(5, 1fr)"
      gap={ThemeSpace.Small}
    >
      <GridItem rowSpan={2} colSpan={1}>
        <Box bg="tomato" w="100%" h="100%" />
      </GridItem>
      <GridItem colSpan={2}>
        <Box bg="papayawhip" w="100%" h="100%" />
      </GridItem>
      <GridItem colSpan={2}>
        <Box bg="papayawhip" w="100%" h="100%" />
      </GridItem>
      <GridItem colSpan={4}>
        <Box bg="tomato" w="100%" h="100%" />
      </GridItem>
    </Grid>
  );
}

Starting and ending lines

Pass the colStart and colEnd prop to GridItem component to make an element start or end at the nth grid position.

import { Box, Grid, GridItem, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Grid h="200px" w="400px" templateColumns="repeat(5, 1fr)" gap={ThemeSpace.Small}>
      <GridItem colSpan={2}>
        <Box bg="tomato" w="100%" h="100%" />
      </GridItem>
      <GridItem colStart={4} colEnd={6}>
        <Box bg="papayawhip" w="100%" h="100%" />
      </GridItem>
    </Grid>
  );
}

Template areas

The templateAreas prop specifies areas within the grid layout. Use template literals to name the area. Now you can reference the area by passing area prop in the <GridItem /> component.

import { Box, Grid, GridItem, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  const templateAreas = `
        "header header"
        "nav main"
        "nav footer"
    `;

  return (
    <Grid
      templateAreas={templateAreas}
      gridTemplateRows="50px 1fr 30px"
      gridTemplateColumns="150px 1fr"
      h="200px"
      w="100%"
      gap={ThemeSpace.Small}
    >
      <GridItem area="header">
        <Box bg="orange" h="100%" w="100%">
          Header
        </Box>
      </GridItem>
      <GridItem area="nav">
        <Box bg="pink" h="100%" w="100%">
          Nav
        </Box>
      </GridItem>
      <GridItem area="main">
        <Box bg="green" h="100%" w="100%">
          Main
        </Box>
      </GridItem>
      <GridItem area="footer">
        <Box bg="blue" h="100%" w="100%">
          Footer
        </Box>
      </GridItem>
    </Grid>
  );
}