Grid

Used to display content in a grid layout.

• View on Github
• View Core API
• View on Figma

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.

Result

Loading...

Live Editor

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> ) }

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.

Result

Loading...

Live Editor

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> ) }

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.

Result

Loading...

Live Editor

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> ) }

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.

pitfall

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.

Example of using CSS Modules to customize the Grid.

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.