# プロパティを暗記せず、動作を見てCSSレイアウトを構築
CSS GridとFlexboxは、固定座標ではなくレイアウト関係を記述するため強力です。難しいのは、gap、justify-content、align-items、方向、折り返し、トラック、利用可能なスペースがどのように相互作用するかを予測することです。このジェネレーターは、抽象的なプロパティをプリセットとリアルタイムCSSを備えた生きたプレイグラウンドに変えます。 5 クイックスタートプリセット
ライブ 変更ごとにCSSが更新
0 CSSのフレームワーク依存
# Flexbox vs Grid: 配置を調整する前にモデルを選択
Flexbox
アイテムが行または列に並び、自然に折り返す1次元フローに最適。
- ナビゲーションバー
- ボタングループ
- 折り返しカード
- 中央揃えコンテンツ
CSS Grid
行と列がコンポジションの形状を定義する2次元構造に最適。
- ダッシュボード
- ギャラリー
- フォーム
- 編集セクション
# 各コントロールが教えること
| コントロール | CSSプロパティ | 注目点 |
|---|---|---|
| 方向 | flex-direction | 主軸の流れ方 - 行から列に切り替えるとレイアウト全体のロジックが変わる。 |
| 折り返し | flex-wrap | アイテムが1行に留まるか、スペースが尽きると新しい行に流れるか。 |
| 間隔 | gap | 端で崩れないアイテム間のスペース。 |
| 水平配置 | justify-content | 空きスペースが主軸に沿ってどのように分配されるか。 |
| 垂直配置 | align-items | アイテムが交差軸上でどのように配置されるか。 |
| コンテンツ配置 | align-content | 折り返されたflex行またはgrid行が追加の交差軸スペースをどのように分配するか。 |
| 列数 | grid-template-columns | アイテムが次の行に移動する前にgridが作成する等しいトラックの数。 |
| コンテナサイズ | widthとmin-height | 利用可能なスペースが変わったときに同じCSSがどのように反応するか。 |
まずスケール、次に最適化
まずキャンバスを現実的なサイズにスケールします。次に間隔と配置を調整します。これにより、生成されたCSSが実際の条件下で機能します。# 適応可能なクリーンなCSS
.layout-playground {display: flex;flex-direction: row;flex-wrap: wrap;gap: 24px;justify-content: center;align-items: center;}
ビジュアルスケーリングが重要な理由
多くのレイアウトバグは、コンテナがより狭く、より高く、または異なるアイテム数で満たされたときにのみ現れます。CSSがライブ更新されている間にスケーリングすることで、ぎこちない折り返しや脆弱な配置選択を発見できます。
推奨ワークフロー
1次元フローにはプリセットまたはFlexbox、2次元構造にはGridを選択。
CSSをコピーする前にキャンバスをスケールして、レイアウトが現実的な制約に耐えられるように。
各子にマージンを追加する代わりに、アイテム間の間隔にgapを使用。
生成されたCSSを出発点としてコピーし、プロジェクト固有のセレクタとメディアクエリを追加。