Grid API
The API documentation of the Grid React component. Learn more about the properties and the CSS customization points.
import Grid from '@material-ui/core/Grid';Props
| Name | Type | Default | Description |
|---|---|---|---|
| alignContent | enum: '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 | enum: '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 below for more details. | |
| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM 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 | enum: '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 | enum: '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 | enum: 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 | enum: 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 | enum: 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 | enum: 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 | enum: 'nowrap' | 'wrap' | 'wrap-reverse' |
'wrap' | Defines the flex-wrap style property. It's applied for all screen sizes. |
| xl | enum: 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 | enum: 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 properties supplied will be provided to the root element (native element).
CSS
You can override all the class names injected by Material-UI thanks to the classes property.
This property accepts the following keys:
| Name | Description |
|---|---|
| root | Styles applied to the root element |
| container | Styles applied to the root element if container={true}. |
| item | Styles applied to the root element if item={true}. |
| zeroMinWidth | Styles applied to the root element if zeroMinWidth={true}. |
| direction-xs-column | |
| direction-xs-column-reverse | |
| direction-xs-row-reverse | |
| wrap-xs-nowrap | |
| wrap-xs-wrap-reverse | |
| align-items-xs-center | |
| align-items-xs-flex-start | |
| align-items-xs-flex-end | |
| align-items-xs-baseline | |
| align-content-xs-center | |
| align-content-xs-flex-start | |
| align-content-xs-flex-end | |
| align-content-xs-space-between | |
| align-content-xs-space-around | |
| justify-xs-center | |
| justify-xs-flex-end | |
| justify-xs-space-between | |
| justify-xs-space-around | |
| justify-xs-space-evenly | |
| spacing-xs-1 | |
| spacing-xs-2 | |
| spacing-xs-3 | |
| spacing-xs-4 | |
| spacing-xs-5 | |
| spacing-xs-6 | |
| spacing-xs-7 | |
| spacing-xs-8 | |
| spacing-xs-9 | |
| spacing-xs-10 | |
| grid-xs-auto | |
| grid-xs-true | |
| grid-xs-1 | |
| grid-xs-2 | |
| grid-xs-3 | |
| grid-xs-4 | |
| grid-xs-5 | |
| grid-xs-6 | |
| grid-xs-7 | |
| grid-xs-8 | |
| grid-xs-9 | |
| grid-xs-10 | |
| grid-xs-11 | |
| grid-xs-12 |
Have a look at the overriding styles with classes section and the implementation of the component for more detail.
If using the overrides key of the theme,
you need to use the following style sheet name: MuiGrid.
Notes
The component is fully StrictMode compatible.