Gridの使い方

Gridを利用すると2次元レイアウトを制御できます。ここでは、Gridの「基本的な概念」「各プロパティの使い方」について解説します。各プロパティごとにCODEPENでサンプルソースを作っています。ソースを編集しながら動きを確認してみてください。

概念

Flexboxは、 1次元レイアウト(横方向) で回り込みなど制御していました。
対して、Gridは、 2次元レイアウト(横方向×縦方向) で制御できます。

Gridコンテナ という親要素が、複数の Gridアイテム を子要素として持ちます。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

上記のcontainerクラスに display: grid; と定義することで、Gridコンテナが定義されます。

2行×3列のGridコンテナを定義してみます。

Gridコンテナ

display: grid; が定義されたクラスがGridコンテナとなります。

fr (fractions: 分数)

Gridを分割する単位として fr が利用できます。

Gridアイテム

Gridコンテナの子要素がGridアイテムになります。

Gridライン

grid_line.png

セルを分割する 垂直方向の線水平方向の線 がGridラインになります。

最初のラインが1です。Gridアイテムを配置するとき、Gridラインの数字を利用します。
(e.g. 2から4の垂直線内のセルに配置)

Gridを定義

grid-template-columns|列を定義

下記のように、 Gridの列を定義できます。

.template-columns1 {
    grid-template-columns: 50px 50px 100px;  
}

.template-columns2 {
    width: 200px;
    grid-template-columns: 1fr 1fr 2fr;  
}

.template-columns3 {
    width: 200px;
    grid-template-columns: repeat(2, 1fr) 2fr;  
}

grid-template-rows|行を定義

Gridの行を定義できます。
指定方法は、 grid-template-columns と同様です。

gap|間隔を定義

Grid間の間隔を定義できます。

/* 行間隔40px  列間隔10px */
gap: 40px 10px;

補足

  • 古いブラウザでは、接頭辞( grid- )がつき、 grid-gap となります。
  • IE11ではサポートされていません。

Gridアイテムを配置

grid-column|列位置を指定

垂直方向の 開始Gridライン終了Gridライン を指定して、列位置の指定ができます。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/grid-column

grid-row|行位置を指定

水平方向の 開始Gridライン終了Gridライン を指定して、行位置の指定ができます。

参考
https://developer.mozilla.org/ja/docs/Web/CSS/grid-row

両方指定した例

最後に、 grid-column grid-row の両方を指定した例を確認します。

もっと詳しく知りたい

より複雑なレイアウトなど実装したい場合、下記サイトを参考にすると良いです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

動作確認しながら理解したいなら下記サイトがおすすめです。
http://griddy.io/

わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。