import { Badge } from 'terra-cell-grid/package.json?dev-site-package';

import CellGridExample from './example/CellGridExample?dev-site-example';
import CellGridVertical from './example/CellGridVertical?dev-site-example';
import CellGridHorizontal from './example/CellGridHorizontal?dev-site-example';
import CellGridBoth from './example/CellGridBoth?dev-site-example';

import CellPropsTable from 'terra-cell-grid/lib/Cell?dev-site-props-table';
import CellGridPropsTable from 'terra-cell-grid/lib/CellGrid?dev-site-props-table';

<Badge />

# Terra Cell Grid

The terra-cell-grid is a structural row based layout for aligning columns with 100% of its parents width.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-cell-grid`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import CellGrid, { Cell} from 'terra-cell-grid';
```

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<CellGridExample title="Default" />
<CellGridVertical title="Divided Vertically" />
<CellGridHorizontal title="Divided Horizontally" />
<CellGridBoth title="Divided Both Directions" />

## Cell Props
<CellPropsTable />

## CellGrid Props
<CellGridPropsTable />