---
title: Grid
description: 'Grid is a primitive layout component that can arrange content in a grid configuration.'
type: layout
slug: /components/grid/
keywords: ['grid', 'layout', 'align']
---

# Grid

`Grid` is a primitive layout component that can arrange content in a grid configuration.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/foundations/grid.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { Grid } from '@wp-g2/components';

function Example() {
	return (
		<Grid columns={3}>
			<View css={[ui.background.blue]}>
				<Text>Ana</Text>
			</View>
			<View css={[ui.background.blue]}>
				<Text>Elsa</Text>
			</View>
			<View css={[ui.background.blue]}>
				<Text>Olaf</Text>
			</View>
		</Grid>
	);
}
```

## Props

##### align

**Type**: `CSS['alignItems']`

Adjusts the block alignment of children.

##### alignment

**Type**: `GridAlignment`

Adjusts the horizontal and vertical alignment of children.

##### columns

**Type**: `number`,`(number`,`null)[]`

Adjusts the number of columns of the `Grid`.

##### gap

**Type**: `number`

Gap between each child.

##### isInline

**Type**: `boolean`

Changes the CSS display from `grid` to `inline-grid`.

##### justify

**Type**: `CSS['justifyContent']`

Adjusts the inline alignment of children.

##### rows

**Type**: `number`,`(number`,`null)[]`

Adjusts the number of rows of the `Grid`.

##### templateColumns

**Type**: `CSS['gridTemplateColumns']`

Adjusts the CSS grid `template-columns`.

##### templateRows

**Type**: `CSS['gridTemplateRows']`

Adjusts the CSS grid `template-rows`.

<!-- /Automatically Generated -->
<!-- /props -->

## See Also

-   [`Flex`](../flex/)
-   [`HStack`](../hstack/)
-   [`VStack`](../vstack/)