Grid

Grid displays a container that has a display of grid.

Import

import { Grid } from "@prismane/core";

Grid component has the following inner components:

- Grid.Item - The container made for a grid layout.

Usage

<Grid templateColumns={5} gap={fr(1)} w="100%">
  <Grid.Item bg="primary" h={fr(10)} w="100%" />
  <Grid.Item bg="primary" h={fr(10)} w="100%" />
  <Grid.Item bg="primary" h={fr(10)} w="100%" />
  <Grid.Item bg="primary" h={fr(10)} w="100%" />
</Grid>

Complex Layout

<Grid gap={fr(1)} templateColumns={8} templateRows={4} h={fr(60)} w="100%">
  <Grid.Item columnStart={1} columnEnd={2} rowStart={2} rowEnd={5} bg="primary">
    Nav
  </Grid.Item>
  <Grid.Item columnStart={1} columnEnd={9} rowStart={1} rowEnd={2} bg="lime">
    Top Bar
  </Grid.Item>
  <Grid.Item columnStart={2} columnEnd={9} rowStart={2} rowEnd={4} bg="teal">
    Main
  </Grid.Item>
  <Grid.Item columnStart={2} columnEnd={9} rowStart={4} rowEnd={5} bg="ruby">
    Footer
  </Grid.Item>
</Grid>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Grid

Go BackGradient

Up NextHeader