materialuiupgraded

Version:

Material-UI's workspace package

material-ui.com

mui-org/material-ui

104 lines (85 loc) • 8.23 kB

Markdown

--- filename: /packages/material-ui/src/Grid/Grid.js title: Grid API ---  # Grid The API documentation of the Grid React component. Learn more about the properties and the CSS customization points. ```js 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](#css-api) below for more details. | | component | union: string |  func |  object | '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, 8, 16, 24, 32, 40 | 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. | Any other properties supplied will be spread to the root element (native element). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: | Name | Description | |:-----|:------------| | 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-8 | | spacing-xs-16 | | spacing-xs-24 | | spacing-xs-32 | | spacing-xs-40 | | 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 [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Grid/Grid.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes/#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiGrid`. ## Demos - [Grid](/layout/grid/)