Figmaのグリッドの使い方｜表示・非表示と12列・グリッドレイアウト

結論から書くと、Figmaのグリッドはフレームの右パネルの「レイアウトガイド」から追加でき、表示と非表示はShift+Gで切り替えられます。

Figmaで「グリッド」と呼ばれる機能は2つあります。

1つはフレームに引く補助線の「レイアウトガイド」（2025年5月までの名前はレイアウトグリッド）で、もう1つは子の要素を行と列に並べるオートレイアウトの「グリッド」です。

列の目安線を引いて要素をそろえたいなら前者、カードを2列や3列に自動で並べたいなら後者を使います。

レイアウトガイドはフレームを選び、右パネルの「レイアウトガイド」の＋で足し、Shift+Gで全体の表示と非表示を切り替えます。

• 確認日：2026年11月1日（無料のスタータープラン）と11月2日（有料の教育プラン）。公式ヘルプの記載は11月1日に読んだものです
• 見たもの：公式ヘルプ「レイアウトガイドを作成」「グリッドオートレイアウトフローを使用する」（日本語版と英語版）
• 実機で確かめたこと：Figmaデスクトップアプリ126.10.13（日本語表示）、Windows 11 Pro、無料のスタータープランで、練習用のファイルに1440×1024のフレームを作り、12列のレイアウトガイド・表示の切り替え・スタイル化・オートレイアウトのグリッド・CSSとしてコピーを試しました
• 有料プランで確かめたこと：教育プランのアカウントで、オートレイアウトのグリッドのフレームをDev Modeで開き、出てくるCSSを見ました
• 確かめていないこと：行のガイドの詳しい設定、回転したフレーム、ガイドのコピーと貼り付け、チームライブラリへの公開、ブラウザー版、macOS

最短の手順と早見表

12列のガイドを引いて、要素を列にそろえるまでの最短の手順です。

1. フレームツールで、右パネルのプリセットから「デスクトップ」（1440×1024）などのフレームを作る
2. フレームを選んだまま、右パネルの「レイアウトガイド」の＋を押す
3. 追加された「グリッド10px」の左のアイコンを押し、設定の窓の左上の「グリッド」を「列」に変える
4. 数を12、種類をストレッチ、余白を120、ガターを24にする
5. 長方形ツール（Rキー）で列の端の近くまでドラッグすると、列の端にスナップする
6. ガイドを消したいときはShift+Gで全体を隠す

2つのグリッドの違い

公式ヘルプ「レイアウトガイドを作成」の冒頭には、レイアウトグリッドは2025年5月にレイアウトガイドへ名前が変わり、オートレイアウトのグリッドとは別の機能だと書かれています。

画面でも、右パネルの欄の名前は「レイアウトガイド」でした。

ただし、Shift+Gで隠したときに画面の下に出た通知は「レイアウトグリッドが非表示になりました」で、古い名前が残っていました。

8の倍数で余白をそろえる考え方は、8の倍数一覧と8ポイントグリッドにまとめています。

レイアウトガイドを追加する

レイアウトガイドを付けられるのはフレームだけです。

フレームを選ぶと、右パネルの下のほうに「レイアウトガイド」の欄が出ます。

長方形を選んだときは、この欄そのものが出ませんでした。

1. フレームを選ぶ
2. 右パネルの「レイアウトガイド」の右の＋を押す（ツールチップは「レイアウトガイドを追加」）
3. 「グリッド10px」が追加され、設定の窓が開く

追加した直後のガイドは、10pxの正方形のグリッドで、色はFF0000（赤）の不透明度10%。

公式ヘルプの既定値（赤・10%・10pt）と同じです。

＋を2回押すとガイドが2つ増える

＋は1回目の押下で何も起きないように見えたので2回押したところ、ガイドが2つ足されていました。

要らないほうは行の右の−で外せます。

種類は「グリッド」「列」「行」の3つ

設定の窓の左上の「グリッド」を押すと、グリッド・列・行の3つから選べます。

グリッドを選んだときの項目はサイズと色の2つだけで、サイズを8にすると8pxの方眼になりました。

アイコンのように細かくそろえたい物はグリッド、画面の段組みは列か行、と使い分けます。

12列のレイアウトを作る

種類を「列」にしたときの初期値は、数5、色FF0000の10%、種類ストレッチ、幅は自動、余白0、ガター20でした。

今回は1440pxのフレームに、数12・余白120・ガター24を入れました。

この値だと、1440から両側の余白240とガター11本分の264を引いた936pxを12で割り、1列は78pxになります。

欄の右の行の表示は「5列」から「12列」に変わりました。

種類（左・右・中央・ストレッチ）の違い

種類の一覧には、左・右・中央・ストレッチの4つがありました。

• 中央に切り替えた直後：幅の欄が10になり、細い列が中央に集まる
• 幅を72にした後：欄の行の表示が「12列(72ピクセル)」になる
• 左と右：一覧で確かめただけで、設定は変えていない

要素を列にスナップさせる

長方形ツールで、1列目の左端の近くから4列目の右端の近くまでドラッグしました。

左端は列の始まりに吸い付いてX=120になりましたが、右端は少し手前で離したのでW=379でした。

右端の四角いハンドルを列の端に向けて少しだけ動かすと、W=384（4列と3本のガター）に吸い付きました。

数値で確かめたいときは、右パネルの位置のXとレイアウトのWを見れば、列にそろっているか分かります。

フレームの幅を変えるとどうなるか

フレームのWを1440から1024に変えると、ストレッチの列は細くなり、余白の120はそのままでした。

一方で、置いておいた長方形は位置も大きさも変わらず、列からはみ出しました。

レイアウトガイドは目安の線なので、中の要素まで動かしてはくれません。

幅に合わせて要素も伸ばしたいときは、制約かオートレイアウトを組み合わせます。

幅を変えて崩れないか確かめる手順はFigmaでレスポンシブデザインを作る方法で説明しています。

グリッドの表示・非表示を切り替える

切り替え方は、全部まとめてと、1つずつの2通りです。

全部まとめて切り替える（Shift+G）

1. 右上の倍率の表示（％の数字）を押す
2. メニューの「レイアウトガイド」を押してチェックを外す（右にShift+Gと表示される）
3. もう1回押すか、Shift+Gを押すと表示に戻る

このメニューには、ピクセルグリッド、ピクセルグリッドにスナップ、定規（Shift+R）も並んでいました。

ピクセルグリッドは画面の1pxごとの方眼で、レイアウトガイドとは別の設定です。

ガイドを隠したいのにピクセルグリッドのチェックを外しても、レイアウトガイドは消えません。

古い記事でよく見るCtrl+Shift+4も、この機（日本語キーボード）では同じように表示と非表示が切り替わりました。

メニューに出ている割り当てはShift+Gだけなので、覚えるならShift+Gのほうです。

新しいファイルで最初のガイドを足したとき、画面の下に「レイアウトガイドが表示されました」と出ました。

全体の表示を切っていても、ガイドを追加すると表示に切り替わるようです。

1つのガイドだけ隠す

フレームを選び、レイアウトガイドの欄で、隠したいガイドの行の目のアイコンを押します。

8pxのグリッドと12列を重ねていた状態で8pxの行の目を閉じると、方眼だけが消えて12列は残りました。

グリッドが表示されないときの原因

公式ヘルプのよくある質問と、実機で見えたことを合わせると、確かめる順番は次のとおりです。

回転の項目は公式ヘルプの記載で、この記事の検証では試していません。

グループやセクションを選んでいると欄が出ないので、まずレイヤーパネルのアイコンがフレーム（#の形）か見てください。

レイアウトガイドをスタイルにして使い回す

同じ12列をいくつもの画面で使うなら、スタイルにしておくと付け直しが要りません。

1. ガイドを付けたフレームを選ぶ
2. レイアウトガイドの欄の右の4つの点のアイコン（スタイルを適用）を押す
3. 開いた「レイアウトガイドスタイル」の窓の＋を押す
4. 「新しいレイアウトガイドスタイルを作成」で名前（例：Desktop/12列-1440）と説明を入れる
5. 「スタイルの作成」を押す

作ったスタイルには、そのフレームに付けていたガイドが全部入りました（今回は8pxのグリッドと12列の2つ）。

作成後の欄は、ガイドの一覧の代わりにスタイル名の1行になりました。

名前に「/」を入れると、ページの右パネルのスタイル一覧では「Desktop」のまとまりの中に入ります。

無料のスタータープランでも、このファイルの中でスタイルを作って使うことはできました。

スタイルの窓には「Material 3 Design Kit」のスタイルも並んでいて、選ぶだけで付けられます。

他のファイルから使えるようにチームライブラリへ公開するところは、今回は試していません。

スタイルの作り方と直し方の全体はFigmaのローカルスタイルの使い方、グリッドを含むスタイルの一覧を書き出す方法はFigmaのスタイルをCSVに書き出すプラグインにあります。

オートレイアウトのグリッドで行と列に並べる

ここからは、子の要素そのものを行と列に並べるほうのグリッドです。

公式ヘルプ「グリッドオートレイアウトフローを使用する」では、すべてのプランで使えると書かれています。

日本語版にはオープンベータの注記が残っていましたが、英語版にはその注記がありませんでした。

オートレイアウトをグリッドに切り替える

1. 並べたい要素を選び、Shift+Aでオートレイアウトのフレームに入れる
2. 右パネルの「オートレイアウト」のフローで、右端のアイコン（ツールチップは「グリッド」）を押す
3. 「グリッド」の欄の「3×自動」などの表示を押し、列と行の数を選ぶ

フローのアイコンは左から、自由形式・垂直・水平・グリッドの4つでした。

垂直と水平は1方向に並べるフレックスの並べ方で、グリッドだけが行と列の2方向を持ちます。

横に並べた長方形3つ（間隔24）をグリッドにすると、「3×自動」になり、行と列の間隔はどちらも24でした。

数の窓には列と行の欄、マス目の選択欄、「グリッド設定を開く」があり、マス目の3列2行の所を押すと「3×2」になりました。

行を足すと、空いたセルが水色の枠で表示されます。

列と行の幅を決める（固定・内包・1fr）

フレームの上や左に出る青い小さな印を押すと、右パネルが「グリッド」に変わり、列と行が1本ずつ並びます。

列の▼には、幅を固定、コンテンツを内包、コンテナに合わせて拡大（1fr）の3つがありました。

3列とも1frにすると、列は均等に分かれ、画面の下に「Frame 1の幅を「固定」に設定しました」と出ました。

1frは残りの幅を分け合う指定なので、親のフレームの幅が決まっている必要があるためです。

行は数値の欄に160と打つと、種類が固定に変わりました。

セルをまたがせる（列スパン・行スパン）

グリッドの中の子を選ぶと、右パネルに「列スパン」と「行スパン」の欄が出ます。

1. 子を選び、サイズ変更のWとHの▼をどちらも「コンテナに合わせて拡大」にする
2. 列スパンか行スパンに、またがせたいセルの数を入れる
3. ほかの子は空いたセルへ自動で並び直す

高さ351pxの長方形の高さを拡大にしたところ、行2本と間隔の合計（160＋24＋160）より大きかったため、行スパンが自動で2になりました。

1つ目は2行分の縦長のまま残し、2つ目と3つ目は行スパン1・列スパン2にして、左に縦長、右に横長が2段の配置にしました。

3つ目が次の行へ自動で移ったのは、2つ目の列スパンを2にした時点です。

フローを水平や垂直に戻すと1方向の並びに戻るので、カードの一覧だけなら水平と折り返しでも足ります。

水平と垂直のフローでの幅の決め方（Hug・Fill・Fixed）はFigmaオートレイアウトの使い方で説明しています。

CSSとしてコピーで出たもの

グリッドのフレームを右クリックし、「コピー/貼り付けオプション」→「コードとしてコピー」を開くと、CSS、CSS（すべてのレイヤー）、iOS、Androidが並んでいました。

CSS（すべてのレイヤー）でコピーした中身は、次のような位置と大きさの指定でした（一部を抜き出し）。

/* Frame 1 */
position: absolute;
width: 1200px;
height: 344px;
left: 120px;
top: 326px;

/* Rectangle 2 */
position: absolute;
width: 792px;
height: 160px;
left: 408px;
top: 0px;
background: #F2994A;

display: grid や列の指定は入っておらず、画面の位置をそのまま写した値でした。

右下のコードのアイコンからDev Modeに切り替えると、「アップグレードしてDev Modeで作業する」の案内が出て、無料のプランでは開けませんでした。

有料プランでDev Modeを開いた結果は、すぐ下にまとめました。

無料のプランのまま実装の参考にするなら、列の数・1fr・間隔の値を右パネルから読み取って書き写すのが確実です。

有料プランのDev Modeではdisplay: gridで出た

2026年11月2日に、有料の教育プランのアカウントで、同じ形のグリッドを作り直してDev Modeで開きました。

フレームは703×299で、フローをグリッドにして3×2、間隔は縦横とも24、列と行の幅は初期値のままです。

中には長方形を3つ入れ、緑は1セル、橙は列スパン2、青は2行目の1セルにしています。

フレームを選ぶと、インスペクトの「レイアウト」のCSSにdisplay: gridが出ました。

コピーのボタンで取り出したレイアウトのCSSは次のとおりです。

display: grid;
width: 703px;
height: 299px;
row-gap: 24px;
column-gap: 24px;
grid-template-rows: repeat(2,minmax(0,1fr));
grid-template-columns: repeat(3,minmax(0,1fr));
grid-auto-flow: row;

列と行は、幅を変えずに作ったのでminmax(0,1fr)の均等割りで出ました。

右パネルの間隔の24は、row-gapとcolumn-gapに分かれて入っています。

子を選ぶと、またがせたセルの数がspanで出ました。

• 緑（幅158の固定、1セル）：width: 158px; height: 88px; grid-row: span 1; grid-column: span 1;
• 橙（列スパン2、幅は自動で拡大に変わった）：height: 88px; grid-row: span 1; grid-column: span 2; justify-self: stretch;

列スパンを2にすると幅の欄が「塗り」（拡大）に変わり、CSSではwidthが消え、代わりにjustify-self: stretchが付きました。

無料の「CSSとしてコピー」では位置と大きさの値だけだったので、CSS Gridで組み直すならDev Modeの出力のほうがそのまま使える形に近いです。

Dev Modeの言語の一覧はCSS・iOS・Androidの3つでした。

TailwindやReactは、Figma to Codeなどのプラグインから出す形です（プラグインは入れていません）。

よくあるつまずきと対処

列に吸い付かない

ドラッグで離した位置が列の端から少し離れていると、吸い付かずに半端な値になります。

今回もW=379で止まったので、ハンドルを端に寄せ直して384にしました。

画面の倍率を上げてから寄せると、吸い付く位置が見やすくなります。

ガイドがいつの間にか消えた

Shift+Gは文字の入力欄の外で押すと、そのまま表示の切り替えになります。

大文字のGを打ったつもりでガイドが消えたときは、もう1回Shift+Gを押してください。

数字キーで不透明度が変わった

数値の欄を選べていない状態で「1024」と打ったところ、選んでいたフレームの不透明度が24%になりました。

Figmaでは数字キーが不透明度の操作に割り当てられているためで、Ctrl+Zで戻せます。

数値は、欄が青い枠で選ばれているのを見てから打つと防げます。

グリッドの子の大きさが変わらない

子の幅や高さが「固定」のままだと、列を1frにしてもセルに合わせて伸びません。

子のWとHを「コンテナに合わせて拡大」にすると、セルいっぱいに広がります。

行の数を減らせない

公式ヘルプ（日本語版）には、行や列を減らすときは、先にその行や列を空にする必要があると書かれています。

英語版では、減らした行の中身は近くのセルへ移すと説明が変わっていて、この記事では減らす操作は試していません。

公式ヘルプと画面で違っていた所

• 欄の名前はレイアウトガイドに変わっているが、Shift+Gで隠したときの通知は「レイアウトグリッドが非表示になりました」だった
• 公式ヘルプの切り替えのキーはShift+Gだけだが、Ctrl+Shift+4でも同じように切り替わった
• グリッドのオートレイアウトは、日本語版のヘルプではオープンベータの注記があり、英語版には注記が無かった
• 日本語版のヘルプにはトラックの1fr（コンテナに合わせて拡大）の説明が無いが、画面の▼には「コンテナに合わせて拡大(1fr)」があった

まとめ

• Figmaのグリッドは、補助線のレイアウトガイドと、行と列に並べるオートレイアウトのグリッドの2つ
• レイアウトガイドはフレームを選び、右パネルの＋で追加して、種類を列にすれば12列が作れる
• 1440pxに余白120・ガター24の12列なら1列78pxで、長方形は列の端にスナップする
• 表示と非表示はShift+G（右上の倍率のメニューにもある）、1つだけなら目のアイコン
• 見えないときは、全体の表示・目のアイコン・フレームかどうかの順に確かめる
• 同じガイドはスタイルにして使い回せる（無料のプランでもファイルの中で作れた）
• オートレイアウトのグリッドは列スパンと行スパンで大小のタイルが組め、有料のDev Modeではdisplay: gridとspanのCSSで出る

次の一歩は、今のフレームに12列のガイドを1つ足して、見出しやカードの左端が列の始まりにそろっているか、Xの値で確かめてみることです。

参考：レイアウトガイドを作成、グリッドオートレイアウトフローを使用する、Use the grid auto layout flow（いずれも2026年11月1日に確認）