<Grid container spacing={3}><Grid item xs={12}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=12</Paper></Grid><Grid item xs={6}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6</Paper></Grid><Grid item xs={6}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6</Paper></Grid></Grid>
| Prop | 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 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 from 960dp 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 from 768dp 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 from 361dp and wider screens if not overridden. |
| spacing | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3 | Defines the space between the type item component. It can only be used on a type container component. The values of 0-7 map to 0px, 2px, 4px, 8px, 12px, 16px, 24px, 32px |
| 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 from 1200dp 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 (IconButton).
<Grid container spacing={3}><Grid item xs={12}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=12</Paper></Grid><Grid item xs={12} sm={6}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=12 sm=6</Paper></Grid><Grid item xs={12} sm={6}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=12 sm=6</Paper></Grid><Grid item xs={6} sm={3}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6 sm=3</Paper></Grid><Grid item xs={6} sm={3}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6 sm=3</Paper></Grid><Grid item xs={6} sm={3}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6 sm=3</Paper></Grid><Grid item xs={6} sm={3}><Paper style={{ padding: 12, textAlign: 'center' }}>xs=6 sm=3</Paper></Grid></Grid>