layout
PageGrid
フルページの CSS グリッドレイアウト。シングル・左サイドバー・右サイドバー・3 カラムのプリセットを用意。
インポート
import { PageGrid } from '@stella-ds/react'Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| layout | 'single' | 'sidebar-left' | 'sidebar-right' | 'three-col' | 'single' | Grid layout variant |
| gap | '4' | '6' | '8' | '12' | '8' | Column gap |
| fullBleed | boolean | false | Full-width or max-width contained |
使用例
Sidebar
<PageGrid layout="sidebar-left" gap="8">
<aside>Sidebar</aside>
<main>Main content</main>
</PageGrid>