ヘルプ

CSS Grid 使い方と画面ドラッグによるレイアウト指定

CSS Grid ジェネレーターは、グリッド領域を視覚的に描画してCSSとHTMLを素早く作成できる無料ツールです。スライダーとドラッグ操作だけで、複雑なレイアウトコードを自動的に組み立てます。ブラウザ上で完結するため、アカウント登録やデータの送信は不要です。

CSS Grid ジェネレーターの使い方

  1. 列（1〜24）と行（1〜24）、およびギャップ（0〜128px）のスライダーを調整してグリッドの基本形状を決定します。
  2. グリッド上のセルをクリックし、対角線上にドラッグして領域（エリア）を指定します。ドラッグが完了すると名前付きエリア（area-1 など）が作成されます。
  3. エリア一覧で名前を変更し、配置を確認したらCSSまたはHTMLブロックのコピーボタンをクリックしてコードを取得します。

grid-template-areas 使い方と仕様

作成したエリアはすべて長方形である必要があります。ドラッグ時に既存のエリアと衝突すると枠が赤色に変化し、領域は作成されません。不要になったエリアはゴミ箱アイコンをクリックして削除します。

出力されるCSSでは、grid-template-areas に行ごとの領域名が並びます。領域が割り当てられていない空セルにはドット（.）が自動挿入されます。エリア一覧で名前を変更すると、有効なCSS識別子（小文字アルファベット、数字、ハイフン、アンダースコア）に整形されます。

CSS grid-template-columns 使い方とトラックサイズのカスタマイズ

初期状態の各トラック（列や行の幅・高さ）は repeat(3, 1fr) のように等分で指定されます。高度なサイズ設定を開くと、列や行ごとのサイズを個別に入力できます。

指定できる単位や関数には 1fr、2fr、240px、25%、auto、min-content、max-content、minmax(100px, 1fr)、fit-content(300px) が含まれます。無効な値が入力された場合は入力欄が赤色になり、生成コードでは自動的に 1fr として扱われます。

CSS display grid 使い方とレスポンシブ対応

親要素（グリッドコンテナ）に display: grid を指定し、grid-template-columns や grid-template-rows、gap を設定するのが基本の記述法です。本ツールが出力するコードはライブラリに依存しない純粋なCSSです。

画面サイズに応じたレスポンシブ対応を行うには、固定値（px）の代わりに 1fr や minmax() を利用し、メディアクエリ内で grid-template-areas を再定義して1列表示などに切り替えます。

よくある質問

CSS GridとFlexboxはどう使い分ければいいですか？

Flexboxは行または列の1次元のレイアウトに適しており、CSS Gridは行と列を同時に扱う2次元のレイアウトに適しています。全体の大きな構造にはCSS Gridを用い、その中のナビゲーション要素などの並びにはFlexboxを使うのが一般的です。

1frとは何ですか？

1frはグリッド内の余白（空きスペース）を分配する比率を表す単位です。たとえば1fr 2frと指定した場合、2番目のトラックは1番目のトラックの2倍の幅を取得します。

空のセルを作るにはどう指定すればいいですか？

grid-template-areasの指定において、エリアを割り当てない位置にドット（.）を記述します。本ツールでは、ドラッグしてエリアを作成しなかったセルに自動的にドットが出力されます。

minmax()を指定するとどういう挙動になりますか？

minmax(最小値, 最大値)は、トラックのサイズを指定された最小値と最大値の範囲内に収める関数です。たとえばminmax(100px, 1fr)を指定すると、幅が100px未満にならず、余白がある場合は他のトラックと分配して伸縮します。

要素同士の間に余白（gap）をつけるにはどうすればいいですか？

グリッドコンテナに対してgapプロパティ（例: gap: 16px）を指定します。行方向と列方向に同じ余白が挿入され、外周には余白がつきません。行と列で異なる余白を設定したい場合は、row-gapやcolumn-gapを使用します。

エリア名に使えない文字はありますか？

エリア名は英小文字で始まり、英数字、ハイフン、アンダースコアのみ使用可能です。ツール上でエリア名を変更した際、無効な文字は自動的に修正・整形されます。

グリッドの数（列や行）を減らすと作成済みのエリアはどうなりますか？

列や行の数を減らすと、グリッドの範囲外にはみ出たエリアは自動的に切り詰められます。エリア全体がグリッド外に出た場合は、そのエリアは削除されます。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

コードフォーマッター

JS、JSON、HTML、CSS、Pythonコードを整形

CSS自動ベンダープレフィックス付与

CSSを貼り付けてベンダープレフィックスを自動付与。無料。

CSSミニファイア

CSSをオンラインで圧縮。コメントと空白を削除。無料。

CSSボタンジェネレーター

ボタンをデザインしHTML/CSS/Tailwindコードをコピー

div中央揃えジェネレーター

Flexbox、Grid、Absoluteでdivを中央配置。CSSをコピー