本文へスキップ
AZ Tools

CSS Grid プレイグラウンド

grid-template-columns / rows を直接編集、または定番プリセット（3 列、サイドバー、holy grail、auto-fit カード）から選択。gap・justify-items・align-items はチップで調整、プレビューのアイテム数も変更可。変更はライブ反映、CSS は貼り付けるだけ。Flexbox プレイグラウンドと並び、CSS レイアウトの両軸をカバー。

—

テンプレート

プリセットをクリックで列 / 行フィールドに読み込み。

justify-items
align-items
プレビュー
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

使い方

  1. テンプレートプリセットを選ぶか、grid-template の値を直接記述。
  2. gap とプレビューのアイテム数を設定。
  3. チップで justify-items / align-items を調整。
  4. プロジェクトに CSS をコピー。

よくある質問

fr とは？
残りの自由スペースの比率。'repeat(3, 1fr)' でコンテナを等幅 3 列に分割。固定サイズと混ぜる：'200px 1fr' で 200px のサイドバー + 可変メイン。
auto-fit と auto-fill の使い分け？
両方とも収まる分のトラックを作成。auto-fit は空トラックを畳み、auto-fill は残します。レスポンシブなカードグリッドには通常 auto-fit。
整列が思った通りにならない
justify-items / align-items は各セルの内容物の整列。グリッド全体の整列は justify-content / align-content（本ツールではまだ未対応）。
ライン名やエリア名は？
実 CSS では可能ですが、プレイグラウンドは最も一般的な視覚プロパティに集中。named lines / grid-template-areas は強力ですがプレビューでの説明が難しいため。

関連ツール

CSS Flexbox プレイグラウンド

flex-direction・justify-content・align-items・gap をクリックで調整 — CSS や Tailwind クラスをコピー。

開発 0 0

CSS フィルタープレイグラウンド

blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。

カラー 0 0

CSS アニメーション ジェネレーター

CSS アニメーションを視覚的に構築 — プリセット選択・時間/イージング/反復調整・プレビュー・キーフレームコピー。

開発 0 0

CSS clamp() 計算機（流体タイポグラフィ）

2 つのビューポート幅間でなめらかにスケールする `font-size: clamp(...)` を生成 — 1 行コピー。

カラー 0 0

CSS clip-path ビルダー (円、楕円、多角形、Inset)

CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。

カラー 0 0

Cron 式ビルダー

クリックで cron 式を生成 — 毎時 / 日 / 週 / 月 / カスタム — Cron 説明とペア。

開発 0 0