> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/grid.md).

# 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="/files/PBA4ybmJQTLQiMtQ1T7D" 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