# Grid

The `Grid` component is a responsive grid layout that supports up to six columns. It allows for custom styling and flexible child component rendering.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fxrq1ArgLt5l8G4AgxiUM%2Fgrid.png?alt=media&#x26;token=12c221ad-7f1c-40ac-82af-359fc348b54c" alt="Gravity grid component"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Grid } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Grid max={ 4 }>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </Grid>
  );
}

```

### Props

| Prop      | Description               | Required | Value                    |
| --------- | ------------------------- | -------- | ------------------------ |
| children  | the children to render    | required | component(s)             |
| className | custom styles             | optional | SCSS or Tailwind style   |
| max       | maximum number of columns | required | integer (2-8) default: 2 |

### Notes

* The `children` prop allows for flexible rendering of child components within the grid.
* The `max` prop specifies the maximum number of columns the grid can have