display: gridを調べてみる

最近、flexboxを使ってサイトを作ることが多いですが、

この間、flexboxではレスポンシブ対応するのに、難しいサイトを作成しました。

仕方ないので、久しぶりにfloatを使ってサイトを作成しました。

もっといい方法ないかなと思って、調べたところ、display: gridっていうものがあるみたいなので、ちょっと調べてみました。

display: gridとは

flexbox、table同様にマルチカラムレイアウトが可能なプロパティー

flexboxが一次元的なレイアウトに対して、gridは二次元的なレイアウトが可能。

対応ブラウザ

だいたいのブラウザで対応しているみたいですね。

用語

html要素が作る構成物

コンテナ

グリッド全体を囲む要素。

display: grid; かdisplay: inline-grid; を指定すると、その要素は Grid Layout のコンテナになる。

アイテム

コンテナの子要素。

コンテナの直接の子要素は基本的にすべてアイテムになる。

<div style="display:grid;"> <!-- コンテナ -->

  <div></div> <!-- アイテム-->

    <p></p> <!-- アイテム -->

  <div> <!-- アイテム -->

    <div></div> <!-- これはアイテムではない -->

  </div>

</div>

その他の構成物

ライン

グリッドを分ける垂直および水平の線のこと。

グリッドの上下左右それぞれの両端にも存在する。
ラインには、上あるいは左から1から順に正の番号が振られている。

同時に、下あるいは右からは-1から順に負の番号が振られている。（0という番号のラインはない）

トラック

グリッドの行および列のこと。

言い換えればトラックは、隣接する2本のラインの間を表す。

セル

隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位。

エリア

一つあるいは複数のセルが結合してできるセルの集まり。
エリアには名前を付けることができ、アイテムを配置できる。

プロパティ

コンテナ

grid	要素をグリッドコンテナとして定義する。
grid-template-columns	グリッドトラック（列）のサイズを指定する。
grid-template-rows	グリッドトラック（行）のサイズを指定する。
grid-template-areas	グリッドエリアの名前を参照して、グリッドテンプレートを定義する。
grid-template	grid-template-columns、grid-template-rows、grid-template-areasを指定できるショートハンド。
grid-column-gap	グリッドトラック（列）の間を指定する。
grid-row-gap	グリッドトラック（行）の間を指定する。
grid-gap	grid-column-gap、grid-row-gapを指定できるショートハンド。
justify-items	グリッドアイテムの行方向の整列。
align-items	グリッドアイテムの列方向の整列。
justify-content	グリッドトラックの行方向の整列。
align-content	グリッドトラックの列方向の整列。
grid-auto-columns	自動的に生成されたグリッドトラックのサイズを指定する。
grid-auto-rows	自動的に生成されたグリッドトラックのサイズを指定する。
grid-auto-flow	明示的に配置されていないグリッドアイテムの配置を指定する。

アイテム

grid-column-start	グリッドアイテム（列）の開始位置を指定する。
grid-column-end	グリッドアイテム（列）の終了位置を指定する。
grid-row-start	グリッドアイテム（行）の開始位置を指定する。
grid-row-end	グリッドアイテム（行）の終了位置を指定する。
grid-column	grid-column-start、grid-column-endを指定できるショートハンド。
grid-row	grid-row-start、grid-row-endを指定できるショートハンド。
grid-area	グリッドセルに名前を付けてgrid-template-areasプロパティで参照できるようにする。 grid-column、grid-rowのショートハンドでもある。
justify-self	グリッドアイテム内のコンテンツを行方向に整列する。
align-self	グリッドアイテム内のコンテンツを列方向に整列する。

まとめ

色々なレイアウトに対応できそうなので、これから使っていこうかなと思います。