ビュー
レイアウト
Grid

Grid

Gridコンポーネントは、グリッドレイアウトを実現するためのコンテナです。方向、繰り返し回数、ギャップ、幅、高さを設定できます。

基本的な使い方

<Grid direction="row" repeatCount={2} gap={4} width="xl" height="lg">
  <Card>ここにコンテンツが表示されます。</Card>
  <Card>ここにもコンテンツが表示されます。</Card>
</Grid>
使用例

詳細なインターフェース

名前説明デフォルト値
directionグリッドの方向を指定します。'row' または 'col' のいずれかを指定できます。'col'
repeatCountグリッドの繰り返し回数を指定します。1, 2, 3, 4, 5, 6, 7, 8, 'auto' のいずれかを指定できます。2
gapグリッドのギャップを指定します。0, 1, 2, 3, 4, 5, 6, 7, 8 のいずれかを指定できます。4
width幅を制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。'auto'
height高さを制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。'auto'
childrenGridコンポーネント内に表示するコンテンツを指定します。なし
BoxFlexbox