CSS Gridの使い方を初心者向け丁寧に解説！爆速でレイアウトを完結させよう

Grid Layoutは、Flexboxでは実現できない複雑なレイアウトを効率よく作成できます。しかしやや難易度の高い技術のため、理解しづらいところもありますよね。

本記事では「Grid Layoutの使い方」を初心者向けに分かりやすく紹介します。本記事を読めばGrid Layoutの使い方を正確に理解でき、あなたがサイトのレイアウトを組むスピードを大きく向上させられます。

無料で30日間、Web制作が学べる『ZeroPlus Gate』

• Web制作に特化したカリキュラムで、基礎からしっかり固める
• 自分のペースで好きな時間に50本以上の動画教材で学べる
• あなた専属のメンターと作る、あなただけの学習ロードマップ
• 30日間、回数無制限でエンジニアに質問できる

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

Grid Layoutとは

Gridには「格子状のもの」という意味があり、Grid Layoutとは格子状のマス目をベースとして、CSSでWebサイトのレイアウトを組む手法です。Gridを囲む親要素をコンテナと呼び、Grid内に配置した子要素をアイテムと呼びます。

Grid Layoutを使えば、親要素（コンテナ）の中に子要素（アイテム）を格子状に並べたレイアウトが、かんたんに作成できます。

Grid LayoutとFlexboxの違い

要素を横並びにレイアウトできることからGrid LayoutはFlexboxと似た性質を持っているものの、両者には違いもあります。Flexboxが1次元レイアウトであるのに対し、Grid Layoutは2次元レイアウトである点です。以下の図をご覧ください。

Flexboxは横方向へのレイアウトに適しており、要素の増減やサイズの変化に柔軟に対応できる特長があります。一方で、Grid Layoutは縦横両方向の2次元的なレイアウトを得意とし、より複雑で整然としたデザインを効率的に構築できます。

しかし、Grid Layoutには弱点もあります。たとえばあらかじめ行や列を指定してレイアウトを決める必要があるため、子要素の数やサイズが頻繁に増減する場面では柔軟性に欠ける場合があります。また、要素が増えるとコードが複雑化しやすい点も考慮が必要です。

これを踏まえ、FlexboxとGrid Layoutを使い分ける場面について紹介します。

Grid Layoutを構成する各パーツの用語

Grid Layoutを構成する各パーツの用語と内容を紹介します。

ライン

ラインとはグリッドを分ける縦横の線のことで、全てのラインに番号が振られています。

ラインに0は存在せず、青で示した横方向のラインは一番上が1、赤で示した縦方向のラインでは一番左が1です。一番左と一番上のラインを起点とし、右方向または下方向に向かって2、3…と番号が1ずつ増えていきます。任意の位置にアイテムをレイアウトするには、ライン番号の正しい理解が必要です。

トラック

トラックはコンテナの行と列を指す用語です。

セル

セルとはGrid  Layoutの最小単位を指します。

画像のようにGrid Layoutでアイテムを配置できるグリッドの最小単位を、セルと呼びます。

エリア

複数のセルにまたがる任意の範囲をエリアと呼びます。

画像のように一つまたは複数のセルにまたがる領域がエリアです。エリアの形状は四角形（正方形や長方形を含む）である必要があります。L字型やT字型のエリアは存在しません。

Grid Layoutの対応ブラウザを確認する

Grid Layoutはブラウザのバージョンによっては対応していないため、ベンダープレフィックスが必要なケースがあります。ベンダープレフィックスについては、こちらの記事を参照ください。

【CSS】ベンダープレフィックスとは?種類と違いについても解説

主要なブラウザのGrid Layoutの対応状況については、以下の表でご確認ください。

各ブラウザの対応状況については、WebサイトCan I Useで最新情報を確認できます。

60本の動画でHTML/CSSを集中学習

ZeroPlus Gateの詳しいサービス内容を見る

費用が一切かからないサービスです！

Grid Layoutを適用する方法

コンテナにあたる要素へdisplay: grid;を指定すると、Grid Layoutを適用できます。

See the Pen Grid layout1 by ZeroPlus (@zeroplus-programming) on CodePen.

display:  grid;を指定しただけでは、縦並びのままレイアウトに変化がないように見えますが、すでにコンテナにはGrid Layoutが指定されている状態です。このあとCSS Grid特有のプロパティを使用してレイアウトを変更できます。

トラックの幅や高さを指定するプロパティ

トラックの幅や高さを指定するプロパティは2種類あります。

それぞれ解説します。

grid-template-columns

grid-template-columnsを使えば、列トラックの幅と表示させるアイテムの数を指定できます。grid-template-columnsに指定できる値は、主に以下の2種類です。

grid-template-columnsには複数の値を指定でき、指定する値の数で列数を調整できます。

grid-template-columnsの値をpx指定する

grid-template-columns: 150px 150px;ならば150pxの列トラックを2列、grid-template-columns: 150px 150px 150px;なら150pxの列トラックを3列といった具合に指定できます。

以下のコードをご覧ください。

See the Pen Grid layout2 by ZeroPlus (@zeroplus-programming) on CodePen.

幅200pxのトラックが3列表示されました。g

指定した列トラック数を超える数量のアイテムがある場合は、自動で改行され次の行に表示されます。上の例ではトラックを3列に指定しているため、4つ目のアイテムから次の行に表示されます。

次に4列のレイアウトにしてみます。

See the Pen Grid layout3 by ZeroPlus (@zeroplus-programming) on CodePen.

幅200pxの列トラックが、3列から4列へ変更されました。      

grid-template-columnsにfrを指定する

fr（fraction）は分数という意味を持つ単位です。grid-template-columnsに数値 + frを指定すると、コンテナの幅を数値の比率で分割して、列トラックを表示させられます。

以下のコードをご覧ください。

See the Pen Grid layout4 by ZeroPlus (@zeroplus-programming) on CodePen.

3列とも1frを指定する場合、コンテナが3分割されて幅200pxのトラックが3列表示されました。

2frや3frなどの数値も指定できます。ここでは2frを指定したケースを見てみましょう。

See the Pen Grid layout5 by ZeroPlus (@zeroplus-programming) on CodePen.

2frに指定した2列目が、1frにした行の2倍の幅を取るように調整されて表示されました。「1：2：1の比率」で、列トラックが表示されたわけです。

またpx指定とfr指定を組み合わせて指定する方法もあります。px指定とfr指定を併用する場合、px指定された列トラックの幅が優先的に決まります。そして残りのコンテナ幅が、fr指定の比率で分割される仕組みです。

See the Pen Grid layout6 by ZeroPlus (@zeroplus-programming) on CodePen.

上の例ではpx指定された列トラックを除いたコンテナの幅は300pxのため、2列目と3列目で1：1に分割されます。

コンテナ幅を％指定してブラウザ幅に応じてサイズが変わるようにしてから、grid-template-columnsをfr指定すると、列トラック幅もブラウザ幅に合わせて可変します。レスポンシブデザインと相性が良い指定方法です。

grid-template-columnsの値をautoに指定する

grid-template-columnsにautoを指定する方法もあります。

See the Pen Grid layout6 by ZeroPlus (@zeroplus-programming) on CodePen.

この場合、基本的には1frを指定した時と同じ指定になります。

しかしgrid-template-columns: auto; はfr指定と併用すると性質が変化します。autoを指定をした列トラックの幅は、アイテム内のコンテンツ幅に合わせ自動調整されるようになります。

上下のcontainerは3列目にautoを指定しているため、アイテム内のテキストコンテンツに合わせて幅が調整されています。

ただしcontainer1は3つ目のアイテムのテキストを「item3」、container2はテキストを「アイテム3」とした結果、列トラックの幅に差が生まれています。 

アイテム内のコンテンツ幅に合わせてグリッド幅を柔軟に変化させたい場合には、grid-template-columns: auto;をfr指定と併用しましょう。

grid-template-rows

grid-template-rowsを使えば、行トラックの高さと表示させる行トラックの数を指定できます。grid-template-rowsは、主に以下の2つの値を指定して使います。

See the Pen Grid layout4 by ZeroPlus (@zeroplus-programming) on CodePen.

1行目の高さを150px、2行目の高さを130pxにそれぞれ指定できます。

grid-template-rowsをfrで指定する

grid-template-rowsに数値 + frを指定すると、コンテナの高さを数値の比率で分割して、行トラックを表示させられます。

See the Pen Grid layout8 by ZeroPlus (@zeroplus-programming) on CodePen.

高さ300pxのコンテナのうち、行トラックの1行目が100px、2行目が200pxといった具合に「1：2」に調整されました。fr指定を利用すればコンテナの高さをもとにして、各行の高さを指定する比率に分割できます。

grid-template-rowsをautoで指定する

grid-template-rowsにautoを設定した場合、1frと同じ働きをします。

See the Pen Grid layout9 by ZeroPlus (@zeroplus-programming) on CodePen.

ただしfr指定と併用してautoを指定すると、アイテム内のコンテンツの高さに合わせて自動で調整されます。

.container {
　　 display: grid;
　　 width: 600px;
　　 height: 300px; /*コンテナの高さを300pxに指定*/
　　 grid-template-columns: 1fr 1fr 1fr;
　　 grid-template-rows: 1fr auto;
}

fr指定とautoの併用により、auto に指定した行トラックはアイテムのコンテンツの高さに応じて調整されるようになります。

gap

gapを使えば、グリッド間の余白を指定できます。

See the Pen Grid layout１０ by ZeroPlus (@zeroplus-programming) on CodePen.

グリッド間に10pxの余白を作成できました。あくまでgapはアイテムの間に余白を作成するのであって、コンテナの外側に余白は作成できません。コンテナの外側に余白が必要な場合には、marginを使用しましょう。

またアイテムの縦横に別のサイズの余白を入れたい場合は、gapプロパティに2つの値を指定します。

gap: 値1(縦方向の余白) 値2(横方向の余白);

縦横異なるサイズの余白を指定できました。

grid-template-columnsまたはgrid-template-rowsにfrを指定している場合、gapで指定した余白のサイズを差し引いた残りの幅が分割されます。

fr指定とgapを組み合わせれば、余白幅に応じてアイテムのサイズが調整されます。

Grid Layoutでアイテムの配置を指定するプロパティ

複雑なレイアウトを作成するには、アイテムの配置方法を指定するプロパティを理解する必要があります。

配置する方法は以下の2通りです。

それぞれ解説していきます。

grid-rowとgrid-columnでアイテムを配置する方法

grid-rowとgrid-columnでアイテムを配置する際の指定内容や指定方法を以下にまとめました。

grid-rowとgrid-columnを使ってアイテムを配置するにはライン番号を使います。

ラインは左上を起点として、列方向は右に、行方向は下に向かって番号づけされています。ライン番号の概念が確認できたところで、grid-rowとgrid-columnを用いた指定方法を実例を使って解説します。

上のケースでは、行・列ともにライン番号「2」と「3」の間にアイテムが配置されているため、次のようにコードを記述します。

.item {
   　 grid-row: 2 / 3; /*アイテムの配置位置を「行方向：ライン番号2から3の間」に指定*/
    　grid-column: 2 / 3; /*アイテムの配置位置を「列方向：ライン番号2から3の間」に指定*/
}

またライン番号「1」から「2」、「2」から「3」など、始点と終点が隣合う指定の場合、終点のライン番号を省略して記述可能です。

.item {
    grid-row: 2; /*アイテムの配置位置を「行方向：ライン番号2から3の間」に指定*/
    grid-column: 2; /*アイテムの配置位置を「列方向：ライン番号2から3の間」に指定*/
}

次に複数のセル（エリア）にまたがる配置の方法を解説します。

上記の位置にアイテムを配置するためのコードは以下のとおりです。

.item {
　　　grid-row: 1 / 3; /*アイテムの配置位置を「行方向：ライン番号１から３の間」に指定*/
　　　grid-column: 2 / 4; /*アイテムの配置位置を「列方向：ライン番号２から４の間」に指定*/
}

複数のセルにまたがるアイテムを配置できました。grid-rowとgrid-columnによる指定方法を応用すれば、複雑に入り組んだレイアウトを作成できます。

上記のレイアウトのコードを掲載しますので、参考にしてみましょう。

<div class="container"> 
　　　<div class="item1">item1</div>
　　　<div class="item2">item2</div>
　　　<div class="item3">item3</div>
　　　<div class="item4">item4</div>
　　　<div class="item5">item5</div>
　　　<div class="item6">item6</div>
</div>

.container {
 　　 display: grid;
 　　 width: 600px;
 　　 height: 300px;
 　　 grid-template-columns: 1fr 1fr 1fr;
 　　 grid-template-rows: 1fr 1fr 1fr;
 　　 gap: 10px 30px;
}

.item1, .item2, .item3, .item4, .item5, .item6{
 　　 border: 1px black solid;
}

.item1 {
　　　grid-row: 1;
　　　grid-column: 1/3;
}
.item2 {
　　　grid-row: 1;
　　　grid-column: 3;
}
.item3 {
　　　　grid-row: 2 / 4;
　　　　grid-column: 3;
}
.item4 { 
　　　　grid-row: 3;
　　　　grid-column: 1 / 3;
}
.item5{
　　　　grid-row: 2;
　　　　grid-column: 1;
}
.item6{
　　　　grid-row: 2;
　　　　grid-column: 2;
}

ライン番号の概念をしっかり捉えれば、grid-rowとgrid-columnを使って自在にアイテムを配置できます。

60本の動画でHTML/CSSを集中学習

ZeroPlus Gateの詳しいサービス内容を見る

費用が一切かからないサービスです！

grid-template-areasとgrid-areaでアイテムを配置する方法

grid-template-areasとgrid-areaでアイテムの配置を指定する方法を紹介します。まずは作成したいレイアウトに、あらかじめエリア名を指定します。

エリア名は自由に命名できます。ここではareaA, areaB, areaC……といった具合に名づけます。HTMLで必要な数のアイテムを用意します。

<div class="container"> 
　　　<div class="itemA">areaA</div>
　　　<div class="itemB">areaB</div>
　　　<div class="itemC">areaC</div>
　　　<div class="itemD">areaD</div>
　　　<div class="itemE">areaE</div>
　　　<div class="itemF">areaF</div>
</div>

このときに下のように、作成するレイアウトが何個のセルで構成されているかを確認します。

このレイアウトは縦3×横3のセルで構成されていることが分かりました。grid-template-areasを使ってコンテナにエリア名を指定していきます。

.container {
    display: grid;
    width: 600px;
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px 30px;
    grid-template-areas: 
    "areaA areaA areaB"
    "areaE areaF areaC"
    "areaD areaD areaC"; /*「セル3×3のレイアウト」に対してエリア名を指定*/
}

上記のようにgrid-template-areasの値に直接、レイアウトを組む感覚でエリア名を記述します。ポイントは「"（ダブルクォーテーション）」 で行ごとに区切る点です。次にgrid areaプロパティを使用して、エリア名を割り振っていきます。

.itemA {
　　　grid-area: areaA;
}
.itemB {
 　　grid-area: areaB;
}
.itemC {
　 　grid-area: areaC;
}
.itemD {
　 　grid-area: areaD;
}
.itemE {
　 　grid-area: areaE;
}
.itemF {
　　 grid-area: areaF;
}

grid-template-areasが反映されない場合に確認するべきポイント

grid-template-areasとgrid-areaによる配置指定が反映されない場合には、以下の2点について確認しましょう。

エリア名に数字を使っていないか？

エリア名に数字を使用するとgrid-template-areasは反映されません。

エリアを四角以外の形状に区切っていないか？

エリアの形状は、四角形である必要があります。L字型やT字型にエリアを指定してもgrid-template-areasはききません。

プロ講師に質問し放題で安心して学習！

「ZeroPlus Gate」のサービス内容を見てみる

費用が一切かからないサービスです

まとめ

Grid Layoutとは格子状のマス目をベースとして、CSSでWebサイトのレイアウトを組む手法です。うまく使いこなせば、今までの概念を覆すような方法でウェブサイトのレイアウトを効率的に構築できます。ただしやや複雑な技術なため、理解には時間がかかるかもしれません。

数あるGridに関する用語の中でも、特に押さえておくべきはコンテナの行と列を指すトラックです。

トラックに要素（アイテム）を配置させて、格子状のレイアウトを組むのが主な使い方だからです。トラックの幅や高さを指定するプロパティには2種類あります。

サイズの指定はpxかfrのうちいずれかで行われます。frはGrid特有の指定方法であり、レスポンシブ対応する際にも使うため、しっかり押さえておきたいところです。

frを1ずつ、書くアイテムに指定すると親要素（コンテナ）のサイズ分、均等に分割されます。

ですが、2以上の数字を指定することにより、それぞれのアイテムのサイズの比率を変更できます。

このように自由自在にレイアウトを作成できます。

GridLayoutは学ぶべき内容も多く、やや理解の難しい概念です。まずはよく使う技術から少しずつ普段のコーディングに取り入れて感覚をつかんでいくことをおすすめします。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー