---
title: GridItem
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/GridItem
---

Child element of the `<Grid>` component.

By default it spans one column but you can specify the number of columns that it should span by setting the `columnSpan` or the `columnStart` and `columnEnd` props.

### Usage

```js
import { GridItem } from 'nr1'
```

### Props

| `children` REQUIRED node    | Content to render inside the grid item.                                                                                                                                                                                                                                                                                                                             |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string          | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                      |
| `collapseGapAfter` boolean  | If `true`, the grid item will fill the following column gap set by the grid.                                                                                                                                                                                                                                                                                        |
| `collapseGapBefore` boolean | If `true`, the grid item will fill the preceding column gap set by the grid.                                                                                                                                                                                                                                                                                        |
| `columnEnd` number          | Determines the grid item's end column within the grid.Possible values: integer between 1 and 12.                                                                                                                                                                                                                                                                    |
| `columnSpan` number         | Determines across how many columns the grid item should span, starting from the provided `columnStart`. This prop should be used as an alternative to `columnEnd`. If both of them are provided, only the `columnEnd` will be considered.Possible values: integer between 1 and 12.                                                                                 |
| `columnStart` number        | Determines the grid item's start column within the grid. Possible values: integer between 1 and 12.                                                                                                                                                                                                                                                                 |
| `style` object              | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                    |
| `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. |