<Grid> は、レスポンシブなグリッドレイアウトを提供するコンポーネントです。

<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>

​
プロパティ

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

最大カラム数。画面幅が小さい時には、自動的にカラム数が減ります。

<Card /><Panel />