Skip to main content

Grid

Used to display content in a grid layout.

Anatomy

  1. Grid
  2. Grid Item

Import

import { Grid, GridItem } from '@pluralsight/react'

Usage

Columns

Here is an example of how columns work with the Grid. Here we are creating a 12 column grid with a gap of 6px between each column.

function GridColumnExample() {
  const cols = new Array(12).fill(null)
  return (
    <Grid cols="12" gap="6" rows="3rem">
      {cols.map((_, idx) => (
        <GridItem
          col={idx + 1}
          key={idx}
          style={{
            backgroundColor: 'var(--ps-surface-strong)',
          }}
        />
      ))}
    </Grid>
  )
}

Spanning columns

Here is an example of how to span columns with the GridItem. Here we are creating a 12 column grid with a gap of 6px between each column. We are also spanning the first GridItem to take up 4 columns.

function GridSpanExample() {
  return (
    <Grid cols="12" gap="6" rows="3rem">
      <GridItem
        col="1 / span 4"
        style={{
          backgroundColor: 'var(--ps-surface-strong)',
        }}
      />
      <GridItem
        style={{
          backgroundColor: 'var(--ps-surface-strong)',
        }}
      />
      <GridItem
        style={{
          backgroundColor: 'var(--ps-surface-strong)',
        }}
      />
    </Grid>
  )
}

Template areas

Here is an example of how to use template areas with the Grid. Here we are creating a 12 column grid with a gap of 6px between each column. We are also using the areas property to define the layout of the GridItems. This is a great way to create responsive layouts.

function GridAreasExample() {
  const cellStyles = {
    backgroundColor: 'var(--ps-surface-strong)',
  }

  return (
    <Grid
      areas={['header header', 'nav main', 'footer footer']}
      cols="12"
      gap="6"
      rows="2rem 10rem 5rem"
    >
      <GridItem area="header" col="1 / span 12" style={cellStyles}>
        Header
      </GridItem>
      <GridItem area="nav" col="1 / span 3" style={cellStyles}>
        Nav
      </GridItem>
      <GridItem area="main" col="4 / span 9" style={cellStyles}>
        Main
      </GridItem>
      <GridItem area="footer" col="1 / span 12" style={cellStyles}>
        Footer
      </GridItem>
    </Grid>
  )
}

Customizing

There are 3 ways to customize the Grid components.

The Grid components create styles using inline-styling. This means that if you use CSS to customize, you will need to use the !important keyword to override the inline styles.

1. Unused Classes

Each component layer of the Grid has a unused class name that can be utilized in your local CSS to customize the Grid at any level.

  1. pando-grid: The element of the Grid.
  2. pando-grid-item: The element of the GridItem.

2. Passing a className prop

You can pass a className prop to the Grid component to customize the Grid. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

import customStyles from './customStyles.module.css'

function CustomGrid(props) {
  return <Grid className={customStyles.custom}>{props.children}</Grid>
}

3. Ejected Grid

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Grid however you prefer while keeping the accessibility behavior.

import { getGridProps, getGridItemProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

There are no behavior patterns required for the Grid.

API

Grid

Parameters

interface GridProps extends HTMLAttributes<HTMLDivElement> {
  areas: string[]
  cols?: number
  gap?: string
  rows?: number
}

GridItem

Parameters

interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
  area?: string
  col?: number
  row?: number
}

Accessibility

The Pando Grid & GridItem APIs combined with semantic HTML allow the Grid & GridItems to be fully accessible and screen-readable.