跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post →

编辑此页面

Grid API

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

Import

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.

Component name

The MuiGrid name can be used for providing default props or style overrides 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 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'
| 		 Deprecated. Use justifyContent instead, the prop was renamed.

Defines the justify-content style property. It is applied for all screen sizes.
justifyContent '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-content-xs-center .MuiGrid-justify-content-xs-center
justify-content-xs-flex-end .MuiGrid-justify-content-xs-flex-end
justify-content-xs-space-between .MuiGrid-justify-content-xs-space-between
justify-content-xs-space-around .MuiGrid-justify-content-xs-space-around
justify-content-xs-space-evenly .MuiGrid-justify-content-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.

Demos