@activelylearn/material-ui

Version:

Material-UI's workspace package

91 lines (76 loc) • 6.24 kB

Markdown

--- filename: /packages/material-ui/src/Grid/Grid.js ---  # 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 | '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' | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | | lg | enum: false, 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, 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, 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, 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, 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: - `container` - `item` - `zeroMinWidth` - `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` - `spacing-xs-8` - `spacing-xs-16` - `spacing-xs-24` - `spacing-xs-32` - `spacing-xs-40` - `grid-xs` - `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)