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 は強力ですがプレビューでの説明が難しいため。

関連ツール

JWT デコーダー

JWT のヘッダー・クレーム・有効期限を即座に確認。

開発00

UUID ジェネレーター

ランダムなバージョン 4 UUID をまとめて生成し、コピー。

開発00

ハッシュ生成 (SHA)

テキストから SHA-1・SHA-256・SHA-384・SHA-512 ハッシュを生成。

開発00

URL エンコーダー / デコーダー

URL 用にテキストをパーセントエンコード、または URL をデコード。

開発00

Base64 エンコーダー / デコーダー

テキストを Base64 にエンコード、または Base64 をテキストにデコード。

開発00

JSON フォーマッター & バリデーター

ブラウザで JSON を整形・並べ替え・圧縮・検証できます。

開発00