脱Float!? CSS3のGrid Layout Module がめっちゃ便利Front End Programming

脱Float!? CSS3のGrid Layout Module がめっちゃ便利

CSS

Grid Layout Module がモダンブラウザ対応したので、使い方をまとめます。Flexbox同様使用方法が複雑なので、この記事ではこれだけ知ってれば最低使える内容をまとめました。

Grid Layout Module ってなんぞ?

Grid Layout ModuleはCSS3 の display に設定できる値の一種でグリッド状にレイアウトを指定できます。

どの要素を何番目に、どの位置に置くかを決めることができるので音声読み上げソフトなども考慮してコーディングでき、アクセシブルです。

昨今の多様化されたディバイスにも柔軟にレイアウトを設定していくことができるので、痒いところに手がとどくモジュールです。

こちらは現在の実装状況です。モダンブラウザはしっかりカバーしてますね!

Can I Use

昔、tableでレイアウトを組んでた方ならわかると思うのですが、あれをCSS側でやるといえばイメージしやすいのではないでしょうか?

実際にテーブルと比べて見るとこんな感じです。

grid01.png

Flex Boxと何が違うの?

最近のコーダの方なら dispay: flex; を愛用している方多いと思います。私も最初は flex とどう違うのかなーと思ってたのですが、flex は順番の入れ替えができるものの縦横いずれかの一方方向にレイアウトを組んていく比べ縦横関係なくトリッキーな位置にマス目を埋めながらレイアウトすることができます。よくわかりませんが、私的にはFFタクティクスを思い出します!

個人的な使いどころとしては、記事一覧などをカード式で表示したい時は flex、header、footer、メイン等サイトの骨組みになるような大きなレイアウト組む時、特に変わったレイアウトな場合は grid いう感じで使い分けると良さそうな気がします。あとはタブレットやスマフォで使うようなゲームっぽいUIにも向いていると思います。

Gridの実装方法

Grid を使う時は、親要素に display: Grid;もしくは display: inline-grid; を指定します。親要素をグリッドコンテナー、その子要素をグリッドアイテムと呼びます。

IEの実装方法は後述します。

列(縦方向)は grid-column、行(横方向)は grid-row で指定します。エクセルのセルの番号を指定する感じをイメージするのもいいかもしれません。

アイテムの配置する場所の指定の仕方がちょっとクセがあります。

縦横スタート地点が1です。3個グリッドアイテムがあれば図のように1 ~ 4という感じに勝手にラインが引かれます。このラインをグリッドライン、このラインとラインの間をグリッドトラックというそうなのですが、そんなめんどっちーことは覚えなくていいです。

grid02.png

基本のHTMLのコードはこんな感じであることを前提に進めていきますね。

<div class="wrapper">  
  <div class="item1">ITEM 1</div>
  <div class="item2">ITEM 2</div>
  <div class="item3">ITEM 3</div>
  <div class="item4">ITEM 4</div>
  <div class="item5">ITEM 5</div>
</div>

一番左端上にマス目2こ分1列のグリッドアイテムを作りたいなら、以下のように指定します。

/* 行グリッドライン1 ~ 3まで*/
grid-column: 1 / 3;
/* 列グリッドライン1 ~ 2まで*/
grid-row: 1 / 2;

図のようにグリッドアイテムを配置したいコードはこんな感じになります。

.wrapper{
  display: grid;
}
.item1{
  padding: 10px;grid-column: 1/3;
}
.item2{
  grid-column: 1/3;
}
.item3{
  grid-column: 3/4;grid-row: 1/3;
}
.item5{
  grid-column: 2/4;
}

grid-column、grid-rowは指定なければgrid 1マス分のサイズでよしなに配置してくれます(IE以外)。そのため、デフォルトの値を使うitem4は設定不要です。

display: grid; と display: inline-grid; の違いはこんな感じ。今のところ display: inline-grid; の使い所に出会ったことがないです。

grid04.png

親要素に縦横サイズを指定できる

縦・横のグリッドアイテムのサイズをあらかじめ決めておきたい場合は親要素に grid-template-columnsgrid-template-rows を利用します。

 

何も指定してない場合は全ての縦横列は auto が指定されます。

grid03.png

grid-template-columns: auto 1fr auto;

1fr は左右のグリッドアイテムの幅を除いた全体の残りの幅となります。

grid-template-rows も同様の指定が可能です。

繰り返す場合はこんな指定の仕方もできます。親要素の25%のサイズの行を4つ繰り返し配置できます。

grid-template-columns: repeat(4, 25%);

こういう指定をする時はトリッキーなレイアウトは避けて、グリッドアイテムのポジション指定に注意た方が良さそうです。

現実的な指定の仕方としては、両サイドの幅を固定したような以下のような感じが多くなるのではないでしょうか。

grid-template-columns: 200px 1fr 200px;

テンプレートをまとめて書く

テンプレートは以下のようにまとめて書くこともできます。
コードがやたらめったら長くなるので、改行して可読性を高めてあげると良いです(と、他のブログなどで言われていた)。
/(スラッシュ)までは横方向にどのアイテムをどのくらいの高さで設定、/以降は縦のアイテムのサイズです。

grid-template:
    "header header" 50px
    "main sub" 1fr
    "footer footer" 50px /
    1fr 200px ;

グリッドアイテム同士の余白はgrid-gapで設定

グリッドアイテムの余白の設定に grid-row-gap, grid-column-gap というものがあります。grid-gapで縦横まとめて余白の設定ができるのでショートハンドで書きましょう。

grid-gap: 10px 15px;

ご注意。IEの書き方がちょっと違う

IE11は書き方が違います。先ほど実装した例をIE用に書き換えてみましょう。

もともと、Grid Layoutの発案者はMicrosoftということだけあって、プレフィックスつけたり作法自体は面倒なもののシンプルちゃシンプル。

その代わり、全てのグリッドアイテムに列と行の位置の設定しないといけません。

IEではグリッドラインの概念がないのか、1 ~ 2を占有していてもアイテムが1こ目の場合は -ms-grid-column を1と設定します。その代わり-ms-grid-column-span で使用するマス目の数を指定してあげます。table の colspan や rowspan に概念が近いですね!

.wrapper{
  display: grid;
  display: -ms-grid;
  grid-template-columns: 200px 1fr 200px;
  -ms-grid-columns: 200px 1fr 200px;
  -ms-grid-rows: 1fr 1fr 1fr;
}
.item1{
  grid-column: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}
.item2{
  grid-column: 1 / 3;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}
.item3{
  grid-column: 3 / 4;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
}
.item4{
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.item5{
  grid-column: 2 / 4;
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
}

grid05.png

悲しいかな、おうちにIEは仮想環境のWin7 IE11しか確認できてなく grid-gap がうまく反映しませんでした。

他のブログを見る限り確証はありませんがいける感じではあるので大丈夫そうではあります笑。

みなさんが口を揃えて言っているのはIEめんどくさい。まあ、仕方ないです。クロスブラウザ対策も技量のひとつと開き直って頑張ってください(人ごと)。

いずれにせよ、この先サポートが切れると思いますし、現状でもやり方はたくさんあるでしょう!臨機応変にプレフィックスやハック、Polyfillなどをうまく利用して乗り切りましょう。

多くのブラウザ対応する場合はIEだけ、puddingとかで設定して外へはみだず部分はネガティブマージン入れるのもありです。

//IEのハック
_:-ms-fullscreen, :root element {
  //ハックする内容
}

大きめのレイアウトであれは無理にネガティブマージン使わなくてもmarginやpaddingで乗り切れるのであまり気にする必要はなさそうです。まだまだ複雑なレイアウトを組もうと思うと古い方法と併用する方が良さそうです。

PostCSS ならプレフィックスが自動でつくらしい

PostCSS なら IEにプレフィックスつけてくれるプラグイン(オートプレフィクサー)使えば自動でIE対応可能らしい。

Autoprefixer

Grid Layout をコーディングでたくさん使う必要があるようであれば導入した方が良さそうです。とはいえ、大きなレイアウトだけなら、SASS で mixin 作っちゃえば十分だと思います。

私も実際、IE対策のために現在の案件で PostCSS で開発しようと思いましたが、IE用の設定のコードはわずか数行で済んだのでやめました笑

まとめ

Grid Layout Module について自分の中に落とし込むためにもさらっとまとめてみました。

もっと複雑な設定もありますが、正直、そこまで使うー?というのも本音です。気が向いたらまとめようと思います。
余談ですが、flex でもよほどでない限り、割といつも決まりきった用法で十分だったりします。縦方向の reverse の使い所に遭遇したことないですもん笑

とはいえ、今後どんどん進化していくであろう Grid Layout Module どういう時に使うと便利だった事例を追記していきます。

最後までお読みいただき、ありがとうございました!

参考URL

第1回 Grid Layout Moduleの概要

関連記事もあわせてお読みください

Read More Blogs

よく読まれている記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me