【CSS】Grid Layout（display: grid）の基本ガイド

今回の記事では、CSSのGrid Layoutについて分かりやすく解説します。

一見複雑そうに感じるGridですが、ポイントを押さえれば決して難しくありません。

基本をマスターすれば、複雑なレイアウトもすぐに組めるようになります。

サンプルや図を交えて、丁寧に解説していきますので、一緒にGridの使い方を身につけていきましょう。

CSS Gridとは？
gridの基本構文と主要プロパティ
gridのプロパティ応用例
CSS Gridジェネレーターの紹介
- CSS Grid Generator
- Layoutit!v2
最後に

CSS Gridとは？

gridとは

CSSの「grid（グリッド）」とは、2次元のレイアウトを実現するためのCSSレイアウトシステムです。

「grid」は本来「格子」「網」「碁盤の目」という意味で、ウェブ制作では行（row）と列（column）で構成されるレイアウトを簡単に実装できるのが最大の特徴です。

表計算ソフトとかを思い浮かべるといいかもしれません。

従来のCSSレイアウト（floatやposition、Flexboxなど）では、複雑な2次元レイアウトを組むのが難しく、テクニックや工夫が必要でした。

CSS Gridを使うことで、「3列×2行のレイアウト」や「セルをまたぐ配置」「入れ子構造」など、複雑な配置をシンプルな記述でコントロールできるようになります。

tableとの違い

まず、「行」と「列」といえば tableタグを思い浮かべる方もいるかもしれませんが、tableタグは「データ表」をマークアップする役割である一方、CSSのGridはレイアウトやデザインを組むために使用する役割となり、用途が全く異なります。

また、CSSの displayプロパティには table もあります。display: table;

display: gridとdisplay: table は似ている部分もありますが、用途・柔軟性・推奨される使い方が大きく異なります。

	display: grid	display: table
レイアウト	2次元のグリッド	表形式のレイアウト
自由度	高い（行・列を自由に設計）	行・列は自動調整される
レスポンシブ	容易	難しい
用途	モダンなページレイアウト全般	表現をテーブル的にしたい時
子要素指定	grid-row/grid-column	table-row/table-cell

以前はこの display: table; はFlexboxやGridがなかった時代によく使われていました。

現在はレイアウト目的には「grid」や「flex」推奨です。

ただし、「表形式の見た目」やIE8以前への互換性が必要な場合のみdisplay: tableの出番となります。

Flexbox(display: flex)との違い

Flexbox（フレックスボックス）も人気の高いレイアウト方法ですが、Flexboxは“1次元”のレイアウトに特化しています。

つまり、Flexboxは「横並び」や「縦並び」など一方向の並び替えや整列には強いですが、行・列の両方を同時に制御することは苦手です。

一方で、CSS Gridは「行」と「列」を同時に指定できるため、“2次元”のレイアウトが簡単に実現できます。

Flexbox：1次元の並び（横 or 縦）
Grid ：2次元の複雑なレイアウト（表のような配置）

用途に応じて使い分けることで、レイアウトの実装効率が大きく向上します。

Flexboxについては下記で詳しく書いてますのでご確認ください。

【CSS】Flexbox（display: flex）の使い方完全ガイド今回の記事では、CSSのflex（flexbox）について解説していきます。flex は、CSSで要素のレイアウト（配置やサイズ）を柔軟に…

gridの基本構文と主要プロパティ

CSS Gridを利用するには、まず親要素（コンテナ）にdisplay: grid;を指定します。

これで、その子要素が自動的にグリッドのアイテムとして扱われます。

ここからまずは gridの基本プロパティを抑えましょう。

grid-template-columnsとは

grid-template-columnsは、グリッドの「列（columns）」の数と幅を指定するプロパティです。

下記のソースコードの例では３列のレイアウトになります。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

200px：1列目の幅は固定200px
1fr：2列目は残りのスペース分の比率を1とする
2fr：3列目は残りのスペース分の比率を2とする（2倍分）

frは「fraction（分割単位）」という意味になります。

上記の図のように、例えば親要素の幅が800pxあったとすると、各カラムの幅は以下のように計算されます。

１．まず1列目（左端）が「200px」で固定され残りのスペースが生まれます。

　（1列目）：200px

　（残りのスペース）＝800px（親の幅）− 200px（1列目）＝600px

２. 残りのスペースを「1fr」と「2fr」に分ける

　（2列目）：1fr
　（3列目）：2fr
　という合計「3fr」分で割り振ることになります。

　600px ÷ 3fr = 200px / fr

3. 実際の幅

　1fr分が200pxというのが決まれば、それを各カラムのfr分で割当てます。

　1fr = 200px × 1 = 200px
　2fr = 200px × 2 = 400px

grid-template-rowsとは

grid-template-rowsは、グリッドの「行（row）」の数と高さを指定するプロパティです。

下記のソースコードの場合は３行表示になります。

.container {
  display: grid;
  grid-template-rows: 100px auto 2fr;
}

1行目：固定100px
2行目：auto 内容に応じて自動調整（ここでは仮に20pxとします）
3行目：2fr 残りのスペース（280px）

３列目は2frなのに「2倍」の560px ではないのか？

ここで疑問に思われたかとおもいますが、３行目は2frとなっていますが、残りの280px分となっています。これは次の計算式によるものになります。

（残りのスペース)＝ 400px – 100px – 20px = 280px
（3行目）：2fr
　のため、残りのスペースを「合計2fr分」で割り振ることになります。

　280px ÷ 2fr = 140px / fr
　2fr = 140px × 2 = 280px

このため、３行目の2frは1frと書いても同じ横幅となります。

grid gapとは

グリッドのアイテム同士のすき間（間隔）を設定するプロパティがgapです。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 70px 70px;
  gap: 16px;
}

gap: 16px; → 行・列の間に16pxのすき間をつける
gap: 行列;のように、行と列で値を分けることも可能（例）gap: 16px 5px

この例では、

grid-template-columns: 1fr 1fr 1fr;　で３列、
grid-template-rows: 70px 70px;　で２行のレイアウトを作成しています。

その要素の黒塗りの箇所が gap 16px; で設定した要素と要素のすき間となります。

Gridの位置揃え（全体・セル内）

grid全体を中央寄せ（横方向のみ）

gridに限らずサイト全体で中央寄せ表示するにはmargin: 0 auto; を指定します。

margin: 0 auto;　で中央寄せします。
grid に幅（width）を指定します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 70px 70px;
  gap: 16px;
  margin: 0 auto; /* 水平方向の中央寄せ */
  width: 800px; /* 横幅を指定 */
}

セル内を右寄せ・中央・左寄せ・上段・中央・下段に配置する

親要素で一括で指定する場合は、justify-items（横）や align-items（縦）を利用します。

子要素（セル）を個別で設定する場合は、justify-self（横）や align-self（縦）を利用します。

設定値はどちらも同じです。デフォルト値は stretch （セル全体に広がる）になっています。

justify-self … 横方向の位置（start/center/end/stretch など）

align-self … 縦方向の位置（start/center/end/stretch など）

/*セル内を中央寄せにする（一括） */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
}

/* 個別で設定する */
.item cell-left{
  justify-self: end;
}

各設定値は以下の図のとおりです。

※「stretch」（デフォルト）の場合、アイテム自体はセル全体に広がりますが、テキストの位置は上詰めです。

セル内のテキスト表示を中央にしたい場合は、追加でtext-align: center;や、display: flexなどを入れて中央にします。

以下は中央寄せにする2つの方法のサンプルコードです。

左は、親要素の grid デフォルトの「stretch」が効いており、セル全体に広がった.itemに対して、子要素で「display: flex;」を設定し、Flexboxで中のテキストを中央寄せにしています。

右は、親要素からの「stretch」を「justify-self: center」などで上書きして、.item2 自体がセルの中央に配置されています。（アイテム自体の幅・高さは内容サイズのまま）

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px;
  /* 指定がなければ stretch */
  /* justify-items: stretch; */
  /* align-items: stretch; */
}

/* 左のstretch 中央寄せ*/
.item {
  background: #8e24aa;
  display: flex; 
　align-items: center; 
  justify-content: center;
}

/* 右のstretch 中央寄せ*/
.item2 {
  background: #8e24aa;
  justify-self: center;
  align-self: center;
}

少しややこしい箇所ですが、挙動の違いが確認できたと思います。

grid css span（セル結合）

グリッドアイテムが複数の行や列にまたがって配置（結合）できるのが、Gridの強力な特徴です。

拡張したい子要素にspanを入れると列や行にまたがって表示されます。

.item1 {
  grid-column: span 2; /* 2列分またがる */
  grid-row: span 3;    /* 3行分またがる */
}

grid-column: 1 / 3;（1列目から3列目直前まで）という書き方も可能
表組みやレイアウト調整でよく使われます

指定例	効果
`grid-column: span 2;`	右へ2列分セル結合
`grid-row: span 3;`	下へ3行分セル結合
`grid-column: 2 / 4;`	2列目から4列目直前まで
`grid-row: 1 / 3;`	1行目から3行目直前まで
`grid-area: 1 / 1 / 3 / 3;`	1行1列目から3行3列目の直前まで
`grid-area: 2 / 2 / 4 / 4;`	2行2列目から4行4列目の直前まで

終了点の指定方法・注意点

grid-area: 行開始 / 列開始 / 行終了 / 列終了; の形式

例えば grid-area: 1 / 1 / 3 / 3; は「1行1列から始まり、3行目直前・3列目直前で終わる」

注意点は直前であることです。

実際は、「1行1列から始まり、2行目まで・2列目まで」
つまり2行2列分をまたがるセル結合と同じ効果です。

以下は指定方法のサンプル図です。紫の点線がセルを分ける枠線となっています。

例えば div3 grid-area: 3 / 1 / 5 / 3; の場合は、「３行目１列目のセルから、４行目２列目のセルまで」を結合する、となります。

コードは以下です。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;      /* 3列 */
  grid-template-rows: 60px 60px 60px 60px ; /* 4行 */
}
.div1 { grid-area: 1 / 1 / 3 / 3; background: #ec407a; }
.div2 { grid-area: 1 / 3 / 4 / 4; background: #26a69a; }
.div3 { grid-area: 3 / 1 / 5 / 3; background: #ffb300; }
.div4 { grid-area: 4 / 3 / 5 / 4; background: #78909c; }

ややこしいですね…

複雑なレイアウトほど grid-area の数値指定はミスもしやすく、直感的にも分かりにくくなりがちです。

そんな時、視覚的にレイアウトを設計できる grid-template-areas という便利な方法があります。次のコンテンツで解説します。

gridのプロパティ応用例

grid-template-areasでセルに名前をつける

grid-template-areasで各セルに名前を付けていき、各子要素にgrid-areaで「エリア名」を割り当てて配置します。

HTMLやCSSを読むだけで、全体のレイアウト構造が直感的に分かるメリットがあります。

先ほど、ややこしかった grid-area の結合がコードレベルで分かりやすくなりますよ。

まずはコードをご確認下さい。

HTML

  <div class="container">
    <div class="item header">Header</div>
    <div class="item sidebar">Sidebar</div>
    <div class="item main">Main</div>
    <div class="item footer">Footer</div>
  </div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;      /* 3列 */
  grid-template-rows: 60px 60px 60px 60px ; /* 4行 */
  grid-template-areas:
    "header header sidebar"
    "header header sidebar"
    "main   main   sidebar"
    "main   main   footer";
}
.header  { grid-area: header;  background: #ec407a; }
.sidebar { grid-area: sidebar; background: #26a69a; }
.main    { grid-area: main;    background: #ffb300; }
.footer  { grid-area: footer;  background: #78909c; }

grid-template-areas: "header header sidebar" "header header sidebar" "main main sidebar" "main main footer"; }

grid-template-areas:でセルに名前付けをして、grid-area でその名前を割当てすれば先ほどと同じ表が作られます。

ソースコード上でも大変見やすいですね。

なお、grid-template-areasに指定するheaderやmainなどの名前には特に厳密な命名規則はありません。（「.」（ドット）は不可です）

今回付けたheaderとかの名前は、あくまでサンプルなので、意味はありませんのでご了承下さい…

repeatの活用

Gridでは同じパターンを繰り返す場合、repeat()関数が非常に便利です。

repeat(3, 1fr);　は、1fr 1fr 1fr; と同じです。

/* 1fr（等分割）のカラムが3つ並ぶ */
grid-template-columns: repeat(3, 1fr);
/* →　grid-template-columns: 1fr 1fr 1fr; と同じです */

auto-fit・auto-fill と minmax の活用

より柔軟なレイアウトには、auto-fit や minmax() を組み合わせます。

auto-fit / auto-fill とは？

repeat() の中で auto-fit や auto-fill を使うと、レイアウト幅に応じて、列数を「自動」で調整（カラム数を自動で増減）します。

開発者がレイアウト幅によってカラム数を明示的に指定しなくても、ブラウザが自動で並べてくれる仕組みです。

auto-fit
→ ウィンドウ幅に合わせて「できるだけ多く」カラムを詰め込むオプションです。
「空きスペースがあればその分カラム数が減る（余白ができる）」
auto-fill
→ スペースが余っても「空カラム」も作る
（見た目上は auto-fit とほぼ同じになりますが、グリッド要素は増えます）

minmax() とは？

カラムや行のサイズを「最小値〜最大値」で指定できる関数
例：minmax(100px, 1fr)
→ 最小100px、最大は可能な限り広がる（1frまで）

代表的な使い方（レスポンシブ対応させる）

通常、レスポンシブ対応といえばメディアクエリを使って画面幅に応じてカラム数を切り替えます。

例えば、通常は3列表示・798px以下で1列にしたい場合は以下のように書きます。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 798px) {
  .container {
    grid-template-columns: 1fr;
  }
}

gridでは以下のように、repeat()やauto-fit、minmax()と組み合わせて、ブラウザが自動でカラム数を調整してくれるレスポンシブ対応が可能です。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

minmax(100px, 1fr)
カラム幅は最小100px、最大でスペースいっぱい1frで設定されます。
auto-fit
ウィンドウや親要素の幅に応じて自動で列数が増減します。
repeat(繰返し回数, １カラムの横幅）repeat(auto-fit, minmax(100px, 1fr));
最小100pxのカラムが画面幅で表示できるカラム分が表示されます。

例えば、

親要素の表示幅が220pxの場合、２カラム（110pxのカラムが２列）になります。
表示幅が180pxの場合は、１カラム（180pxのカラムが１列）で表示されます。
表示しきれないカラムは次の行に折り返して表示されます。

この仕組みは、レスポンシブなカードレイアウトや画像ギャラリーなど、
ウィンドウサイズに合わせてレイアウトを自動調整したい場面でよく使われます。

少しややこしいですので、実際にどのようにレイアウトが変わるか、グリッドの親幅をスライダーで変えるデモを用意しましたのでこちらでご確認下さい。

DEMO

Gridの「入れ子（ネスト）」

Gridでは、グリッドの中にさらにグリッドを入れることができます。

これまでのサンプルからもあるようにFlexboxなど、他のレイアウトも可能です。

複雑なレイアウトを作りたい場合に非常に便利です。

下記のサンプルでもは「親グリッド（セル1）」の中に「子グリッド」をネストしたものになります。

HTML

  <div class="parent-grid">
    <div class="parent-cell">
      親グリッド（セル1）
      <div class="child-grid">
        <div class="child-cell">子グリッドA</div>
        <div class="child-cell">子グリッドB</div>
      </div>
    </div>
    <div class="parent-cell">
      親グリッド（セル2）
    </div>
  </div>

CSS（余計な箇所は除いています）

.parent-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  max-width: 600px;
}
.parent-cell {
  background: #7e57c2;
  color: #fff;
  text-align: center;
  position: relative;
}
.child-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.child-cell {
  background: #ec407a;
  color: #fff;
}

DEMO