• /
  • EnglishEspañolFrançais日本語한국어Português
  • EntrarComeçar agora

Grid

Grid is a 2-dimensional layout system, meaning that it can handle both columns and rows, that helps you design grid-based user interfaces, unlike <Stack> which is largely a 1-dimensional system.

Usage

import { Grid } from 'nr1'

Examples

Basic

<>
  <Grid>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={1}>
      <div className="nr1-RedBox">1</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={2}>
      <div className="nr1-RedBox">2</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={6}>
      <div className="nr1-RedBox">6</div>
    </GridItem>
    <GridItem columnSpan={6}>
      <div className="nr1-RedBox">6</div>
    </GridItem>
    <GridItem columnSpan={12}>
      <div className="nr1-RedBox">12</div>
    </GridItem>
  </Grid>
</>;

Medium gap type

<>
  <Grid gapType={Grid.GAP_TYPE.MEDIUM}>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>;

Small gap type

<>
  <Grid gapType={Grid.GAP_TYPE.SMALL}>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={3}>
      <div className="nr1-RedBox">3</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>;

Columns

<Grid>
  <GridItem columnStart={1} columnEnd={6}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={2} columnEnd={7}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={3} columnEnd={8}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={4} columnEnd={9}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={5} columnEnd={10}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={6} columnEnd={11}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
  <GridItem columnStart={7} columnEnd={12}>
    <div className="nr1-RedBox">6</div>
  </GridItem>
</Grid>;

Collapse gap

<>
  <Grid>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapBefore>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapBefore collapseGapAfter>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4} collapseGapAfter>
      <div className="nr1-RedBox">4</div>
    </GridItem>
    <GridItem columnSpan={4}>
      <div className="nr1-RedBox">4</div>
    </GridItem>
  </Grid>
</>

Props

children

REQUIRED
node

Grid items to display.Up to 12 items are allowed.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

fullHeight

boolean

Expands the grid to occupy all available height.

fullWidth

boolean

Expands the grid to occupy all available width.

gapType

enum

Size of the gap between columns and rows.<One of

Grid.GAP_TYPE.MEDIUMGrid.GAP_TYPE.SMALL
>

spacingType

enum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of
<One of

Grid.SPACING_TYPE.EXTRA_LARGE, Grid.SPACING_TYPE.LARGE, Grid.SPACING_TYPE.MEDIUM, Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.OMIT, Grid.SPACING_TYPE.SMALL,

>
>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

Copyright © 2025 New Relic Inc.
CarreirasTermos de serviçoPolítica do DMCAAviso de privacidadePolítica de cookiesUK Slavery Act

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.