Skip to content

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.

Demos