Skip to content
Edit this page

Grid API

The API documentation of the Grid React component. Learn more about the props and the CSS customization points.

import { Grid } from '@material-ui/core';

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 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 '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

  • Style sheet name: MuiGrid.
  • Style sheet details:
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:

If that's not sufficient, you can check the implementation of the component for more detail.

Notes

The component is fully StrictMode compatible.

Demos