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

<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

​
cols
'1' | '2' | '3' | '4'
required

Maximum number of columns. The number of columns automatically decreases when the screen width is small.