BlueAI Grid
レスポンシブレイアウトの基盤。ブレイクポイントに応じたカラム数・ガター・マージンを定義する。
グリッドタイプ
Fluid Grid
ビューポート幅に追従して伸縮する。情報密度の高い画面（テーブル、ダッシュボード、カンバン）に適する。
width: 100%
Fixed Grid
最大幅を固定してセンタリングする。可読性が重要な画面（フォーム、記事、設定）に適する。
max-width: fixed
ブレイクポイント
| 名前 | Min | Columns | Gutter | Margin | Tailwind |
|---|---|---|---|---|---|
| Mobile | 0px | 4 | 16px | 16px | default |
| Mobile L | 640px | 4 | 16px | 24px | sm: |
| Tablet | 768px | 8 | 24px | 32px | md: |
| Desktop | 1024px | 12 | 24px | 32px | lg: |
| Wide | 1280px | 12 | 32px | auto | xl: |
| Ultra Wide | 1536px | 12 | 32px | auto | 2xl: |
カラム構成
Mobile — 4 columns
1
2
3
4
Tablet — 8 columns
1
2
3
4
5
6
7
8
Desktop — 12 columns
1
2
3
4
5
6
7
8
9
10
11
12
レイアウトパターン
12 / 12 — フル幅
3 + 9 — サイドバー + コンテンツ
6 + 6 — 2カラム均等
4 + 4 + 4 — 3カラム均等
8 + 4 — コンテンツ + アサイド
使い方
Tailwind CSS でのグリッド指定
/* レスポンシブカラム */
<div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 md:gap-6">
/* コンテナ */
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
/* カラムスパン */
<div className="col-span-4 md:col-span-8 lg:col-span-9">
<aside className="col-span-4 md:col-span-8 lg:col-span-3">
ガイドライン
Do
- 情報密度の高い画面には Fluid Grid を使う
- 可読性重視の画面には Fixed Grid + max-width を使う
- サイドバーやアサイドをグリッド外に配置する
Don't
- コンテンツ中心の画面で Fluid Grid を使わない（行が長すぎて読みにくい）
- 情報密度の高い画面で Fixed Grid を使わない（コンテンツが切れる）
- グリッドカラムをビューポート全幅にスパンしない