Skip Navigation
React Magma

Grid

CSS Grid React Component

Basic Usage

The Grid component is simply a container that has display: grid; on it. All of the CSS Grid options can be added via props.

Child elements can be added as they are, or inside of <GridItem></GridItem>. GridItem accepts props that allow it to be styled to span columns or rows, and be part of a grid area.

import React from 'react';


import {
  Grid,
  GridItem,
  GridJustifyContent,
  magma,
  useMediaQuery,
} from 'react-magma-dom';


// eslint-disable-next-line complexity
export function Example() {
  const isSmallerScreen = useMediaQuery(
    `(max-width:${magma.breakpoints.small}px)`
  );


  return (
    <Grid
      gridJustifyContent={GridJustifyContent.center}
      gridTemplateColumns="repeat(4, 1fr)"
      gridGap="0.5em"
    >
      <GridItem
        gridColumn="1 / 5"
        as="main"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: 'calc(100% - 48px)',
          margin: '0 auto',
        }}
      >
        GridColumn 1 / 5
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '1 / 3'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: isSmallerScreen ? 'calc(100% - 48px)' : 'auto',
          margin: isSmallerScreen ? '0 auto' : '0 0 0 25px',
        }}
      >
        GridColumn {isSmallerScreen ? '1 / 5' : '1 / 3'}
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '3 / 4'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: isSmallerScreen ? 'calc(100% - 48px)' : 'auto',
          margin: isSmallerScreen ? '0 auto' : '0',
        }}
      >
        GridColumn {isSmallerScreen ? '1 / 5' : '3 / 4'}
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '4 / 5'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: isSmallerScreen ? 'calc(100% - 48px)' : 'auto',
          margin: isSmallerScreen ? '0 auto' : '0 25px 0 0',
        }}
      >
        GridColumn {isSmallerScreen ? '1 / 5' : '4 / 5'}
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '1'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: 'calc(100% - 48px)',
          margin: '0 auto',
        }}
      >
        GridItem
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '2'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: 'calc(100% - 48px)',
          margin: '0 auto',
        }}
      >
        GridItem
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '3'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: 'calc(100% - 48px)',
          margin: '0 auto',
        }}
      >
        GridItem
      </GridItem>
      <GridItem
        gridColumn={isSmallerScreen ? '1 / 5' : '4'}
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: magma.spaceScale.spacing05,
          width: 'calc(100% - 48px)',
          margin: '0 auto',
        }}
      >
        GridItem
      </GridItem>
    </Grid>
  );
}

Semantic HTML

<Grid /> and <GridItem /> both accept the as prop to allow for semantic HTML.

import React from 'react';


import {
  Grid,
  GridItem,
  GridAlignItems,
  GridJustifyContent,
} from 'react-magma-dom';


export function Example() {
  return (
    <Grid
      gridTemplateColumns="repeat(4, 1fr)"
      gridGap="1em"
      gridJustifyContent={GridJustifyContent.center}
      gridAlignItems={GridAlignItems.center}
    >
      <GridItem
        gridRow="1 / 4"
        gridColumn="1 / 1"
        as="nav"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: '1em',
          height: '100%',
        }}
      >
        Nav
      </GridItem>
      <GridItem
        gridColumn="2 / 4"
        gridRow="1 / 3"
        as="section"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: '1em',
          height: '100%',
        }}
      >
        Section
      </GridItem>
      <GridItem
        as="aside"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: '1em',
        }}
      >
        Aside
      </GridItem>
      <GridItem
        as="figure"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: '1em',
          margin: '0',
        }}
      >
        Figure
      </GridItem>
      <GridItem
        gridColumn="2 / 5"
        as="footer"
        style={{
          border: '1px solid black',
          textAlign: 'center',
          padding: '1em',
        }}
      >
        Footer
      </GridItem>
    </Grid>
  );
}

Accessibility

While CSS Grid allows the re-ordering of elements visually, it does not change the tab order or how elements are read via screen reader. The correct way is to order elements in the DOM in the way they should be read.

Responsiveness

Grids can be placed within media queries, nested inside other grids, intrinsically resized, and structured with flexible units. For these reasons, we did not explicitly declare a way to make a responsive grid within Magma.

More on CSS Grid

The Complete Guide to Grid on CSS-Tricks.com explains everything about grid in depth.

Grid Props

as

Description

Semantic HTML tag to be used for the Grid Examples: `nav`, `footer`, `main`, `figure`, `aside`, etc.

Type

string

Default

`div`

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

gridAlignContent

Description

Sets the alignment of the grid within the grid container along the block (column) axis.

Type

enum, one of:
GridAlignContent.center
GridAlignContent.end
GridAlignContent.spaceAround
GridAlignContent.spaceBetween
GridAlignContent.spaceEvenly
GridAlignContent.start
GridAlignContent.stretch

Default

-

gridAlignItems

Description

Align grid items along the block (column) axis. Applies to all items in the grid.

Type

enum, one of:
GridAlignItems.center
GridAlignItems.end
GridAlignItems.start
GridAlignItems.stretch

Default

-

gridAutoFlow

Description

If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items.

Type

enum, one of:
GridAutoFlow.column
GridAutoFlow.columnDense
GridAutoFlow.row
GridAutoFlow.rowDense

Default

-

gridDisplay

Description

Defines the display style property. Sets grid or inline-grid.

Type

enum, one of:
GridDisplay.grid
GridDisplay.inlineGrid

Default

GridDisplay.grid

gridGap

Description

Set the space between columns and / or rows in the grid.

Type

CSS.Property.GridGap

Default

-

gridJustifyContent

Description

Sets the alignment of the grid within the grid container along the inline row axis.

Type

enum, one of:
GridJustifyContent.center
GridJustifyContent.end
GridJustifyContent.spaceAround
GridJustifyContent.spaceBetween
GridJustifyContent.spaceEvenly
GridJustifyContent.start
GridJustifyContent.stretch

Default

-

gridJustifyItems

Description

Align grid items along the inline (row) axis. Applies to all items in the grid.

Type

enum, one of:
GridJustifyItems.center
GridJustifyItems.end
GridJustifyItems.start
GridJustifyItems.stretch

Default

-

gridTemplateAreas

Description

Set the areas in the grid.

Type

CSS.Property.GridTemplateAreas

Default

-

gridTemplateColumns

Description

Set the columns in the grid.

Type

CSS.Property.GridTemplateColumns

Default

-

gridTemplateRows

Description

Set the rows in the grid.

Type

CSS.Property.GridTemplateRows

Default

-

Grid Item Props

as

Description

Semantic HTML tag to be used for the GridItem Examples: `nav`, `footer`, `main`, `figure`, `aside`, etc.

Type

string

Default

`div`

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

gridArea

Description

Define which grid area a grid item belongs to.

Type

CSS.Property.GridArea

Default

-

gridColumn

Description

Defines the span of a column on a grid item.

Type

CSS.Property.GridColumn

Default

-

gridItemAlignSelf

Description

Aligns the grid item within the cell along the block (column) axis. Applies to a grid item inside a single cell.

Type

enum, one of:
GridItemAlignSelf.center
GridItemAlignSelf.end
GridItemAlignSelf.start
GridItemAlignSelf.stretch

Default

-

gridItemJustifySelf

Description

Aligns the grid item within the cell along the inline (row) axis. Applies to a grid item inside a single cell.

Type

enum, one of:
GridItemJustifySelf.center
GridItemJustifySelf.end
GridItemJustifySelf.start
GridItemJustifySelf.stretch

Default

-

gridRow

Description

Defines the span of a row on a grid item.

Type

CSS.Property.GridRow

Default

-

Any other props supplied will be provided to the wrapping div element.

On this page

Deploys by Netlify