ブログトップ > 未分類

CSS Gridとは？floatを使わずに要素を並べる新しいレイアウト方法

ナナミ
ナナミ

2018/6/4

2018/11/27

こんにちは！ライターのナナミです。

みなさん、グリッドレイアウトってご存知ですか？

grid1

こんな風に、コンテンツがタイル状に配置されているレイアウトです。
目に入ってくる情報が多くて楽しいですね！

でもなんか作るの難しそう…

と思った方も多いのではないでしょうか？

実はこのグリッドレイアウト、CSSで簡単に実装できちゃうんです。

ということで今回はCSS Gridについて解説をしていきます。

この記事は下記の流れで進めていきます。

【基礎】CSS Gridとは何か
【基礎】CSS Gridの仕組み
【基礎】CSS Gridの用語
【基礎】CSS Gridの使い方
【発展】CSS Gridを使ったレイアウト例

グリッドレイアウトは最近人気のあるレイアウトです。
ぜひ覚えて、流行に乗っちゃいましょう！

グリッドレイアウトとは？

grid1

グリッドレイアウトとは、この画像のように積み木のように並べた感じのレイアウトです。

要素は基本的に四角形で配置されています。
グリッドレイアウトとはその要素の大きさや位置を、グリッド線というものを基準に決めています。

grid2

こんな感じで、マス目のように区切っているのがグリッド線です。
これに合わせて、要素を配置していきます。

グリッド線を基準にレイアウトするので、グリッドレイアウトと言うわけですね。

グリッドレイアウトを作れるCSS Gridとは

ではCSS Gridとはどのような仕組みのものなのでしょうか。
ちょっと細かく見ていきましょう。

displayプロパティで指定できる

displayプロパティにgridという値があるの、お気付きでしたか？
そう、それがCSS Gridです。

親要素にdisplay:gridをつけることで、グリッドレイアウトで並べることができます。

詳しい指定方法は後ほど解説しますね！

2次元レイアウトを採用

要素を横並びにさせる時、floatとかを使いますよね。

grid3

あれは縦一列に並んでいる要素を、隣に回り込ませて実装しています。
針金で繋がっている箱を、針金を曲げて配置しているような感じです。
これを1次元レイアウトと言います。

グリッドレイアウトでは、2次元レイアウトを採用しています。

grid4

箱が針金で繋がっているのではなく、箱ごとに独立しているのを、ぽんぽん置いて配置している感じになります。

なので大きさが違うレイアウトでも、綺麗に並んでくれるのです。

対応ブラウザ

IE11とIE10にはベンダープレフィックス（プロパティの頭に-ms-とつけるやつ）が必要です。
IE9以前は使えもしません。

使う際にはちょっと注意が必要な手法です。

ベンダープレフィックスってなんだっけ？という方はリファレンスを参照してみてください。
http://www.htmq.com/csskihon/603.shtml

CSS Gridの用語

CSS Gridの使い方の前に、CSS Gridならではの用語について解説しますね。

グリッドコンテナ

grid5

CSS Gridを指定している一番大きな枠、つまり親要素のことです。
この中にある子要素が、次の項目で説明するグリッドアイテムになります。

グリッドアイテム

grid6

グリッドコンテナの中にある子要素のことです。
配置されるコンテンツそのものですね。

グリッドライン

grid7

配置の基準となるグリッド線のことです。

その他

他にも細かい用語があるのですが、ひとまず上の3つがわかれば大丈夫です。
補足として紹介しておきますね。

用語説明
グリッドセルグリッドラインの間、要素が配置される位置のことです。
グリッドトラック縦のライン、横のラインのまとまりです。
グリッドエリアグリッドセルとほぼ同じですが、複数のグリッドセルのまとまりも指します。
グリッドギャップグリッドトラックの間にある空白スペースです。

細かいところはリファレンスなどを参照してください。

CSS Gridの使い方

お待たせしました！
CSS Gridの使い方を解説していきますよ。

今回はこんな感じに用意した要素を、グリッドレイアウトで並べていきます。
grid8

HTML

<div class="grid_test">
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
</div>

CSS

.grid_test-child {
    padding:  10px;         /* 余白指定 */
    border-radius:  5px;    /* 角丸指定 */
    margin: 5px;            /* 周りの余白指定 */
    color:  #fff;           /* 文字色指定 */
}
.grid_test-child:nth-child(1) {
    background-color:  #7b9ad0;     /* 背景色 */
}
.grid_test-child:nth-child(2) {
    background-color:  #c8d627;     /* 背景色 */
}
.grid_test-child:nth-child(3) {
    background-color:  #d5848b;     /* 背景色 */
}
.grid_test-child:nth-child(4) {
    background-color:  #51a1a2;     /* 背景色 */
}
.grid_test-child:nth-child(5) {
    background-color:  #66b7ec;     /* 背景色 */
}

グリッドコンテナを作る

まずは親要素にdisplay:gridを指定して、グリッドコンテナを作ります。

grid8

CSS

.grid_test {
    display: grid;  /* グリッドコンテナを作る */
}

まだこの時点では何も起きませんね。

グリッドラインを決める

グリッドレイアウトのキモ、グリッドラインを定義していきます。
縦の線はgrid-template-columns、横の線はgrid-template-rowsで定義できます。

CSS

親要素セレクタ {
    grid-template-columns:要素を配置するエリアの幅;
    grid-template-rows:要素を配置するエリアの高さ;
}

配置エリアの大きさはftという単位で指定します。
親要素を基準とした割合を算出し、幅や高さを決めてくれます。

単純に、数値が大きければ幅が広くなり、小さければ小さくなるという風に覚えておけばOKです。

今回は幅が広いエリアを真ん中に、小さめのエリアを左右に配置してみましょう。

grid9

CSS

.grid_test {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 3fr 1fr;      /* 縦向きのグリッドラインを決める */
    grid-template-rows:1fr 4fr 1fr;         /* 横向きのグリッドラインを決める */
}

画面に変化が出ましたね！
指定した配置エリアに沿って並んでいます。

配置を調整する

最後に、各コンテンツの配置を調整していきます。

各子要素、フレックスアイテムにgrid-columnとgrid-rowを指定します。

CSS

子要素セレクタ{
    grid-column:横の開始位置/横の終了位置;
    grid-row:縦の開始位置/縦の終了位置;
}

grid-columnが横の位置、grid-rowが縦の位置の指定です。

「/（スラッシュ）」の前の数値が要素の開始位置、後ろの数値が要素の終了位置になります。

ここでポイントなのは、数値は配置エリアではなく、グリッドラインが何本目かを表している点です。
例えば、縦は上から2番目の配置エリア、横は2番目と3番目をぶち抜いた形で指定したい場合は
grid10

CSS

.grid_test {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 3fr 1fr;      /* 縦向きのグリッドラインを決める */
    grid-template-rows:1fr 4fr 1fr;         /* 横向きのグリッドラインを決める */
}
.grid_test-child:nth-child(5) {
    grid-column:2/4;        /* 配置指定 */
    grid-row:2/3;           /* 配置指定 */
}

このような記述になります。

では、各フレックスアイテムの位置を指定してみましょう

grid11

CSS

.grid_test {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns:1fr 3fr 1fr;  /* 縦向きのグリッドラインを決める */
    grid-template-rows:1fr 4fr 1fr;     /* 横向きのグリッドラインを決める */
}
.grid_test-child:nth-child(1) {
    grid-column:1/4;    /* 配置指定 */
    grid-row:1/2;       /* 配置指定 */
}
.grid_test-child:nth-child(2) {
    grid-column:1/2;    /* 配置指定 */
    grid-row:2/3;       /* 配置指定 */
}
.grid_test-child:nth-child(3) {
    grid-column:2/3;    /* 配置指定 */
    grid-row:2/3;       /* 配置指定 */
}
.grid_test-child:nth-child(4) {
    grid-column:3/4;    /* 配置指定 */
    grid-row:2/3;       /* 配置指定 */
}
.grid_test-child:nth-child(5) {
    grid-column:1/4;    /* 配置指定 */
    grid-row:3/4;       /* 配置指定 */
}

できました！
ブログなどでよく使われるレイアウトですね。

CSS Gridを使ったレイアウト例

CSS Gridを使えば、こんなレイアウトも簡単にできちゃいます。

互い違いレイアウト

grid-ex1

HTML

<div class="grid_test">
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
</div>

CSS

.grid_test {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns: 1fr 1fr 1fr 1fr;     /* 縦向きのグリッドラインを決める */
    grid-template-rows: 1fr 1fr 1fr 1fr;        /* 横向きのグリッドラインを決める */
}
.grid_test-child {
    padding:  10px;         /* 余白指定 */
    border-radius:  5px;    /* 角丸指定 */
    margin: 5px;            /* 周りの余白指定 */
    color:  #fff;           /* 文字色指定 */
}
.grid_test-child:nth-child(1) {
    background-color:  #7b9ad0;     /* 背景色 */
    grid-column:1/1;                /* 配置指定 */
    grid-row:1/2;                   /* 配置指定 */
}
.grid_test-child:nth-child(2) {
    background-color:  #c8d627;     /* 背景色 */
    grid-column:2/3;                /* 配置指定 */
    grid-row:2/3;                   /* 配置指定 */
}
.grid_test-child:nth-child(3) {
    background-color:  #d5848b;     /* 背景色 */
    grid-column:3/4;                /* 配置指定 */
    grid-row:1/2;                   /* 配置指定 */
}
.grid_test-child:nth-child(4) {
    background-color:  #51a1a2;     /* 背景色 */
    grid-column: 4/5;               /* 配置指定 */
    grid-row: 2/3;                  /* 配置指定 */
}
.grid_test-child:nth-child(5) {
    background-color:  #66b7ec;     /* 背景色 */
    grid-column: 1/5;               /* 配置指定 */
    grid-row:3/4;                   /* 配置指定 */
}

こんな自由なレイアウトも、CSS Gridなら簡単！
位置ズレも起きなくて安心です。

隙間を作らず情報を並べるレイアウト

grid-ex2

HTML

<div class="grid_test">
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
    <div class="grid_test-child">
        コンテンツが入ります
    </div>
</div>

CSS

.grid_test {
    display: grid;      /* グリッドコンテナを作る */
    grid-template-columns: 1fr 1fr 1fr 1fr;     /* 縦向きのグリッドラインを決める */
    grid-template-rows: 1fr 1fr 1fr;            /* 横向きのグリッドラインを決める */
    height: 350px;      /* 高さ指定 */
}
.grid_test-child {
    padding:  10px;         /* 余白指定 */
    border-radius:  5px;    /* 角丸指定 */
    margin: 5px;            /* 周りの余白指定 */
    color:  #fff;           /* 文字色指定 */
}
.grid_test-child:nth-child(1) {
    background-color:  #7b9ad0;     /* 背景色 */
    grid-column: 1/2;               /* 配置指定 */
    grid-row: 1/3;                  /* 配置指定 */
}
.grid_test-child:nth-child(2) {
    background-color:  #c8d627;     /* 背景色 */
    grid-column:2/3;                /* 配置指定 */
    grid-row: 1/4;                  /* 配置指定 */
}
.grid_test-child:nth-child(3) {
    background-color:  #d5848b;     /* 背景色 */
    grid-column: 3/4;               /* 配置指定 */
    grid-row: 1/2;                  /* 配置指定 */
}
.grid_test-child:nth-child(4) {
    background-color:  #51a1a2;     /* 背景色 */
    grid-column: 4/5;               /* 配置指定 */
    grid-row: 1/4;                  /* 配置指定 */
}
.grid_test-child:nth-child(5) {
    background-color:  #66b7ec;     /* 背景色 */
    grid-column: 1/2;               /* 配置指定 */
    grid-row:3/4;                   /* 配置指定 */
}
.grid_test-child:nth-child(6) {
    background-color:  #c08e47;     /* 背景色 */
    grid-column: 3/4;               /* 配置指定 */
    grid-row: 2/4;                  /* 配置指定 */
}

おしゃれな情報サイトなんかで見かけるレイアウトですね。
タイル状に所狭しと並んだコンテンツが、無駄なく情報を表示してくれます。

まとめ

CSS Grid、面白いレイアウトが色々できますね！

オールドブラウザでは使えないのが難点ですが、今後活躍していくこと間違いなしな手法です。
ぜひ覚えて、グリッドレイアウトを活用していってください！

このエントリーをはてなブックマークに追加
LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

すべての記事を見る

この記事のあとによく読まれています！