gulpとgridとIEを仲良くさせる方法

2017.08.10

引っ越ししたオフィスでは外食してランチを充実させよう！と決意したのに、暑いからとついつい一階のナチュラルローソンや最寄り駅との間にあるローソンに頼ってしまうyanagimachiです。関内のオススメランチの場所があったら教えてください！

さて、フロントエンドエンジニアの間でちょっとgridを使ってみよう、ということになったのですがIE（IE11とIE10）の対応やいつものgulpの環境だと色々大変だったので、メモしておこうと思います。

gridって何さ？

gridって何だろう？と調べてみたところ、MDNのグリッドレイアウトがわかりやすかったです。

行と列で要素を配置することのできるレイアウト配置ができるということで、テーブルレイアウトをHTML構造が正しい要素でできるようになったと考えればいいかと思います。gridという名前から、当初flexと変わらないのでは？と思ったのですが、縦も横も指定できるということで、ヘッダーやフッター、メイン、サイドバーの配置をgridでできるようになるみたいです。

ただ、Can I useで対応しているブラウザを見てみると、まだIE（IE11とIE10）では同じような記述で対応できないので、簡単なグリットレイアウトを作ってみることにします。

gridをグリットレイアウトで使ってみる

では、２カラムのグリットを作ってみましょう。

※SCSSはcodepen、CSSはcodepenの下のコードをご覧ください。

HTML

<div class="l-grid l-grid-col2">

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<!-- /.l-grid --></div>

CSS

.l-grid {
  display: -ms-grid; //IE用
  display: grid;
  grid-gap: 30px;
  padding: 30px 30px 0;
}
.l-grid-col2 {
  -ms-grid-columns: 1fr 30px 1fr; //IE用
  grid-template-columns: 1fr 1fr;
}
.l-grid-item {
  padding: 30px;
  background: #eee;
}
.l-grid-item:nth-child(1) {
  -ms-grid-column: 1; //IE用
}
.l-grid-item:nth-child(2) {
  -ms-grid-column: 3; //IE用
}

要素	CSS	どんなもの？
親要素	display: grid;	gridを使用。 IE用のプレフィックスが付いたものも用意する。
親要素	grid-gap	子要素間の隙間を指定。
親要素	grid-template-columns	列の幅を指定。
親要素	-ms-grid-columns	列の割合を指定する（IE用）。 grid-template-columnsと違い、子要素間の隙間もここで指定する。
子要素	-ms-grid-column	何個めの子要素か指定（IE用）。隙間も含めるので、1,3,5...となる。

例で出てくるfrって何？？となりますね。

frとは

比率で指定できる単位です。flexでは単位無しでしたが、gridでは必要なようです。

%でも事足りるのでは？という気もしますが、計算しなくてよかったり、3カラムの時の割り切れなさに不安にならなくてもいいところが良いですね。

　4カラムまで対応させる

-ms-grid-columns、grid-template-columnsを3カラムと4カラム用をそれぞれ用意し、.l-grid-item:nth-child(3)と.l-grid-item:nth-child(4)を追加しました。

※SCSSはcodepen、CSSはcodepenの下のコードをご覧ください。

HTML

<div class="l-grid l-grid-col2">

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<!-- /.l-grid --></div>


<div class="l-grid l-grid-col3">

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<!-- /.l-grid --></div>


<div class="l-grid l-grid-col4">

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<div class="l-grid-item">
.l-grid-item
<!-- /.l-grid-item --></div>

<!-- /.l-grid --></div>

CSS

.l-grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 30px;
  padding: 30px 30px 0;
}
.l-grid-col2 {
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
}
.l-grid-col3 {
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
.l-grid-col4 {
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.l-grid-item {
  padding: 30px;
  background: #eee;
}
.l-grid-item:nth-child(1) {
  -ms-grid-column: 1;
}
.l-grid-item:nth-child(2) {
  -ms-grid-column: 3;
}
.l-grid-item:nth-child(3) {
  -ms-grid-column: 5;
}
.l-grid-item:nth-child(4) {
  -ms-grid-column: 7;
}