CSS レイアウトツール

CSS Grid ジェネレーター

インタラクティブなビジュアル UI から CSS Grid のレイアウト設定を簡単に作成できます。 即時プレビューと CSS / HTML 出力に対応し、すべての操作は純粋にフロントエンドで実行されます。

グリッドコンテナー
クイック設定
grid-template-columns
grid-template-rows
間隔
justify-content
align-content
justify-items
align-items
Grid Items 編集
レイアウトプリセット
即時プレビュー
1
2
3
4
display: grid;\ngrid-template-columns: 1fr 1fr;\ngrid-template-rows: auto auto;\njustify-content: start;\nalign-content: stretch;\ngap: 8px;

機能

Grid Container の完全設定
列／行の制御
均等配置 / 位置揃え
Gap 間隔制御
項目ごとの Grid 配置
即時プレビュー
CSS と HTML を生成
20種類以上のプリセット
ワンクリックでコードをコピー
レスポンシブプレビュー
元に戻す/やり直す
完全フロントエンドでオフライン実行

CSS Grid チュートリアル

CSS Grid Layout は、CSS の強力な 2 次元レイアウトシステムです。行と列の配置を同時に制御でき、複雑な Web ページレイアウトも効率よく構築できます。

Container Properties

  • grid-template-columns — フィールドを定義
  • grid-template-rows — 列を定義
  • gap — グリッド間隔
  • justify-content — 水平方向の配置
  • align-content — 垂直方向の配置
  • justify-items — 項目の水平方向配置
  • align-items — 項目の垂直配置

item プロパティ

  • grid-column-start/end — フィールド範囲
  • grid-row-start/end — 列範囲
  • grid-area — 略語の位置調整
  • justify-self — 個別の水平方向配置
  • align-self — 個別の縦方向配置

一般的な Grid の例

ダッシュボード ダッシュボード
Holy Grail Classic Three Lines
画像ギャラリー
Sidebar レイアウト
カードグリッド
雑誌風スタイル

よくある質問

CSS Grid と Flexbox にはどのような違いがありますか？
CSS Grid は 二次元 row と column を同時制御できる layout system。Flexbox は 1 次元 Flexbox は項目を基本的に一方向へ並べるレイアウトに向いています。Grid は Dashboard や Holy Grail のようなページ全体の配置、Flexbox はナビゲーションバーやカード一覧などコンポーネント単位の配置に適しており、両者はよく併用されます。
fr 単位とは何ですか？
fr（fraction）は CSS Grid 固有の柔軟な単位で、残りスペースをどの割合で配分するかを表します。例： grid-template-columns: 1fr 2fr 2 列目が 1 列目の 2 倍の幅になることを示します。fr unit により Grid layout を柔軟に構成できます。
Item を複数の列またはカラムにまたがらせるには？
使用 grid-column および grid-row プロパティ。例： grid-column: 1 / 3 Item を column 1 から column 3 まで span させます（2 column 分）。span 次の Keywords も利用できます：grid-column: span 2 2 列にまたがることを示します。
repeat() 関数の使い方は？
repeat() Grid の省略機能です。repeat(3, 1fr) 相当する値 1fr 1fr 1fr。以下にも対応 auto-fill および auto-fit container width に自動適応する responsive grid を作るための keyword です。
このツールは無料ですか？
はい、完全無料で登録も不要です。処理はすべてブラウザ内でローカル実行され、データはサーバーへ送信されません。レイアウト設定も外部へ送信されません。

ブラウザー互換性

Chrome 57+
Firefox 52+
Safari 10.1+
Edge 16+
Opera 44+
iOS Safari 10.3+
Android 67+
IE 11+（prefix）

プライバシーステートメント

このツールはすべてブラウザ内で実行されます。作成したレイアウト、Grid Item 設定、スタイルがサーバーへ送信されることはなく、作業内容は端末内に留まります。このツールでは Cookie やトラッキングを使用しません。