grid

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

31,140

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

Demos: - [Grid](https://material-ui.com/components/grid/) API: - [Grid API](https://material-ui.com/api/grid/)

2 contributors

Install grid as a package?

Copied

npm i @bit/mui-org.material-ui.grid

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

grid ()

Demos:

Grid

API:

Grid API

Properties

Name	Type	Description
alignContent	`'stretch' \| 'center' \| 'flex-start' \| 'flex-end' \| 'space-between' \| 'space-around'`	Defines the `align-content` style property. It’s applied for all screen sizes.
alignItems	`'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'baseline'`	Defines the `align-items` style property. It’s applied for all screen sizes.
children	`node`	The content of the component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
container	`bool`	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'`	Defines the `flex-direction` style property. It is applied for all screen sizes.
item	`bool`	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'`	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`	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`	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`	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`	Defines the space between the type `item` component. It can only be used on a type `container` component.
wrap	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	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`	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`	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`	If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case.