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

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

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

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

gridって何さ?

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

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

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

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

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

※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;
}

gulpでgridを使う

さて、いつも新しいことをする時には今回のようにここまでcodepenでテストをして、その後gulpの環境に持っていくのですが、今回はここでIE対応につまずいてしまいました。

というのも、通常のgulp-autoprefixerの設定だとgridのIE対応のコードが思ったように出ませんでした。困りましたね・・・

gulp-autoprefixerのgridのオプションをfalseにする

調べてみたところ、gridだけautoprefixerを使わない設定にすることができるみたいです。新しく対応したものはオフにできることで、柔軟に作業を進められるんですね。gulp-autoprefixer素晴らしい・・・!

gridのオプションはtrueがデフォルトなので、falseを設定します。

grid: false

これでautoprefixerを使わずに、IE対応のCSSをゴリゴリ書いてもautoprefixerに消されずにすみます。


ちょっと時間がかかりましたが、これでgulpとgridとIEを仲良くさせることに成功しました。

まだ案件で気軽に使うには至らないかもしれませんが、自社サイトなどで使ってみたいですね!

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ