---
filename: /packages/material-ui/src/Grid/Grid.js
---
# Grid API
The API documentation of the Grid React component. Learn more about the props and the CSS customization points.
## Import
```js
import Grid from '@material-ui/core/Grid';
// or
import { Grid } from '@material-ui/core';
```
You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
## Component name
The `MuiGrid` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| alignContent | 'stretch'
| 'center'
| 'flex-start'
| 'flex-end'
| 'space-between'
| 'space-around' | 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. |
| alignItems | 'flex-start'
| 'center'
| 'flex-end'
| 'stretch'
| 'baseline' | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. |
| children | node | | The content of the component. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. |
| container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
| direction | 'row'
| 'row-reverse'
| 'column'
| 'column-reverse' | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. |
| item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
| justify | 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly' | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. |
| lg | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
| md | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
| sm | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
| spacing | 0
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10 | 0 | Defines the space between the type `item` component. It can only be used on a type `container` component. |
| wrap | 'nowrap'
| 'wrap'
| 'wrap-reverse' | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
| xl | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
| xs | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
| zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. |
The `ref` is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
## CSS
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| root | .MuiGrid-root | Styles applied to the root element.
| container | .MuiGrid-container | Styles applied to the root element if `container={true}`.
| item | .MuiGrid-item | Styles applied to the root element if `item={true}`.
| zeroMinWidth | .MuiGrid-zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`.
| direction-xs-column | .MuiGrid-direction-xs-column |
| direction-xs-column-reverse | .MuiGrid-direction-xs-column-reverse |
| direction-xs-row-reverse | .MuiGrid-direction-xs-row-reverse |
| wrap-xs-nowrap | .MuiGrid-wrap-xs-nowrap |
| wrap-xs-wrap-reverse | .MuiGrid-wrap-xs-wrap-reverse |
| align-items-xs-center | .MuiGrid-align-items-xs-center |
| align-items-xs-flex-start | .MuiGrid-align-items-xs-flex-start |
| align-items-xs-flex-end | .MuiGrid-align-items-xs-flex-end |
| align-items-xs-baseline | .MuiGrid-align-items-xs-baseline |
| align-content-xs-center | .MuiGrid-align-content-xs-center |
| align-content-xs-flex-start | .MuiGrid-align-content-xs-flex-start |
| align-content-xs-flex-end | .MuiGrid-align-content-xs-flex-end |
| align-content-xs-space-between | .MuiGrid-align-content-xs-space-between |
| align-content-xs-space-around | .MuiGrid-align-content-xs-space-around |
| justify-xs-center | .MuiGrid-justify-xs-center |
| justify-xs-flex-end | .MuiGrid-justify-xs-flex-end |
| justify-xs-space-between | .MuiGrid-justify-xs-space-between |
| justify-xs-space-around | .MuiGrid-justify-xs-space-around |
| justify-xs-space-evenly | .MuiGrid-justify-xs-space-evenly |
| spacing-xs-1 | .MuiGrid-spacing-xs-1 |
| spacing-xs-2 | .MuiGrid-spacing-xs-2 |
| spacing-xs-3 | .MuiGrid-spacing-xs-3 |
| spacing-xs-4 | .MuiGrid-spacing-xs-4 |
| spacing-xs-5 | .MuiGrid-spacing-xs-5 |
| spacing-xs-6 | .MuiGrid-spacing-xs-6 |
| spacing-xs-7 | .MuiGrid-spacing-xs-7 |
| spacing-xs-8 | .MuiGrid-spacing-xs-8 |
| spacing-xs-9 | .MuiGrid-spacing-xs-9 |
| spacing-xs-10 | .MuiGrid-spacing-xs-10 |
| grid-xs-auto | .MuiGrid-grid-xs-auto |
| grid-xs-true | .MuiGrid-grid-xs-true |
| grid-xs-1 | .MuiGrid-grid-xs-1 |
| grid-xs-2 | .MuiGrid-grid-xs-2 |
| grid-xs-3 | .MuiGrid-grid-xs-3 |
| grid-xs-4 | .MuiGrid-grid-xs-4 |
| grid-xs-5 | .MuiGrid-grid-xs-5 |
| grid-xs-6 | .MuiGrid-grid-xs-6 |
| grid-xs-7 | .MuiGrid-grid-xs-7 |
| grid-xs-8 | .MuiGrid-grid-xs-8 |
| grid-xs-9 | .MuiGrid-grid-xs-9 |
| grid-xs-10 | .MuiGrid-grid-xs-10 |
| grid-xs-11 | .MuiGrid-grid-xs-11 |
| grid-xs-12 | .MuiGrid-grid-xs-12 |
You can override the style of the component thanks to one of these customization points:
- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Grid/Grid.js) for more detail.
## Demos
- [Grid](/components/grid/)