CSS Flexbox & Grid プレイグラウンド

CSS Flexbox & Grid プレイグラウンドとは？

CSS Flexbox & Grid プレイグラウンドは、CSS の 2 大レイアウトモデルを学び試作するための無料のビジュアルサンドボックスで、フロントエンド開発者・学習者・デザイナー向けです。Flex か Grid を選び、コンテナーのプロパティを設定し、「設定」を開いて各子要素にスタイルを付けます。Flex モードでは order、flex-grow、flex-shrink、flex-basis、align-self、Grid モードでは列/行スパンと align-self を指定できます。Grid モードにはカスタムトラックサイズもあり、200px 1fr や repeat(auto-fit, minmax(120px, 1fr)) など任意の grid-template-columns/rows 値を入力でき、各セルに名前を付ける grid-template-areas のビジュアルエディター（名前付きグリッドラインも作られます）も備えます。番号付きタイルのライブプレビューがすべての変更を反映し、.container ルールだけ、またはコンテナー＋アイテム別 CSS をコピーできます。

CSS Flexbox & Grid プレイグラウンドの使い方

1. モード切り替えで Flex か Grid を選び、作るレイアウトモデルを決めます。
2. コンテナーのプロパティを設定します——flex-direction/wrap と justify/align、または列数・行数と justify-items/align-items。
3. 「設定」を開いて gap とアイテム数を変え、各子要素にスタイル（order、flex-grow/shrink/basis、align-self、または列/行スパン）を付けます。
4. Grid ではトラックサイズを「カスタム」に切り替え、独自の grid-template-columns/rows を入力します——px、fr、minmax()、repeat(auto-fit/auto-fill, …)。
5. grid-template-areas エディターをオンにして各セルに名前を付け、アイテムを領域で配置します。
6. コンテナーの CSS だけを出力するか、コンテナー＋アイテム別 CSS を出力するかを選び、結果をコピーします。

使用例

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

よくある質問

ここでの Flexbox と Grid の違いは？

Flex モードはアイテムを 1 つの軸に沿って並べ、flex-direction、flex-wrap、justify-content、align-items を扱えます。Grid モードは grid-template-columns と grid-template-rows に justify-items、align-items を加えて二次元に並べます。切り替えで、同じ配置を各モデルがどう扱うか比較できます。

個々のアイテムにスタイルを付けるには？

「設定」を開き、アイテム別コントロールで各子要素に order、flex-grow、flex-shrink、flex-basis、align-self（Flex）、または列/行スパンと align-self（Grid）を設定します。出力を「コンテナー＋アイテム」にすると、カスタマイズした各アイテムに .container > :nth-child(n) ルールが追加されます。

auto-fit や minmax() のようなカスタムトラックサイズは使えますか？

はい。Grid モードでトラックサイズを「カスタム」に切り替え、有効な grid-template-columns/rows 値を入力します——ピクセル、fr 単位、minmax()、レスポンシブな列向けの repeat(auto-fit/auto-fill, minmax(120px, 1fr)) など。プレビューと生成 CSS は入力に合わせて更新されます。

grid-template-areas エディターは何をしますか？

Grid モードでオンにしてグリッドの各セルに名前を付けると、grid-template-areas 宣言が組み立てられ、空セルはドットになります。領域名は名前付きグリッドラインも作り、アイテムの grid-area 欄に名前を入力するとその子要素を領域に配置できます。

データはどこかにアップロードされますか？

いいえ。プレイグラウンドはすべて JavaScript でブラウザ内で動作するため、設定や生成された CSS がサーバーに送信されることはありません。プライバシーが保たれ、ページ読み込み後はオフラインでも使えます。