> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# <Grid />

<Frame>
  <iframe height={500} width="100%" src="https://morph-data-components-storybook.netlify.app/iframe.html?args=&globals=&id=layout-components-grid--grid-story" style={{ background: "white" }} />
</Frame>

`<Grid>` is a component that provides a responsive grid layout.

```tsx theme={"dark"}
<Grid cols="3">
  <Card>
    <p>EC2</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
      $ 15.6 /mo{" "}
    </h3>
    <p>t2.micro, us-east-1</p>
  </Card>
  <Card>
    <p>S3</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
      $ 2.3 /mo{" "}
    </h3>
    <p>us-east-1</p>
  </Card>
  <Card>
    <p>RDS</p>
    <h3
      style={{
        fontSize: "32px",
        fontWeight: "bold",
        margin: ".25rem 0",
      }}
    >
      $ 89 /mo{" "}
    </h3>
    <p>db.t3.small, ap-northeast-1</p>
  </Card>
</Grid>
```

## Properties

<ParamField path="cols" type="'1' | '2' | '3' | '4'" required>
  Maximum number of columns. The number of columns automatically decreases when the screen width is small.
</ParamField>