@patternfly/react-core/src/layouts/Grid/examples/Grid.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: Grid
cssPrefix: pf-v6-l-grid
section: layouts
propComponents: ['Grid', 'GridItem']
---

import './grid.css';

## Examples

### Basic

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid>
  <GridItem span={8}>span = 8</GridItem>
  <GridItem span={4} rowSpan={2}>
    span = 4, rowSpan = 2
  </GridItem>
  <GridItem span={2} rowSpan={3}>
    span = 2, rowSpan = 3
  </GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={4}>span = 4</GridItem>
</Grid>;
```

### With gutters

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter>
  <GridItem span={8}>span = 8</GridItem>
  <GridItem span={4} rowSpan={2}>
    span = 4, rowSpan = 2
  </GridItem>
  <GridItem span={2} rowSpan={3}>
    span = 2, rowSpan = 3
  </GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={2}>span = 2</GridItem>
  <GridItem span={4}>span = 4</GridItem>
  <GridItem span={4}>span = 4</GridItem>
</Grid>;
```

### With overrides

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid sm={6} md={4} lg={3} xl2={1}>
  <GridItem span={3} rowSpan={2}>
    span = 3 rowSpan= 2
  </GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
  <GridItem>Grid Item</GridItem>
</Grid>;
```

## Ordering

### Standard ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
  <GridItem order={{ default: '2' }}>Item A</GridItem>
  <GridItem>Item B</GridItem>
  <GridItem order={{ default: '-1' }}>Item C</GridItem>
</Grid>;
```

### Responsive ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
  <GridItem order={{ lg: '2' }}>Item A</GridItem>
  <GridItem>Item B</GridItem>
  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
</Grid>;
```

### Grouped ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={12}>
  <Grid hasGutter span={6} order={{ default: '2' }}>
    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
    <GridItem>Set 1, Item C</GridItem>
    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
  </Grid>
  <Grid hasGutter span={6}>
    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
    <GridItem>Set 2, Item C</GridItem>
    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
  </Grid>
</Grid>;
```

### Alternative components

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid component="ul">
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
  <GridItem component="li">Grid item</GridItem>
</Grid>;
```