CSS Grid を autoprefixer で IE11 対応させる時の Tips

2021年9月28日 16:10

autoprefixer@9.8.6 を使ってつまづいた部分をメモっておきます。

1. grid-template-rows を明示的に指定する

// NG
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

// OK
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

2. grid-template-rows と grid-template-columns は同じブロック内で宣言する

// NG
.container {
  ...
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
  }
}

// OK
.container {
  ...
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

3. grid-gap ではなく gap を使う

旧名の grid-gap では動かなかった。grid-column-gap, grid-row-gap も同様。

// NG
.container {
  ...
  grid-gap: 10px;
}

// OK
.container {
  ...
  gap: 10px;
}

4. autoprefixer の引数に { grid: true } を使わない

// NG
autoprefixer({ grid: true })

// OK
autoprefixer({ grid: 'autoplace' }) // or 'no-autoplace'

5. { grid: 'autoplace' } だと自分で指定した gird-column, grid-row が上書きされてしまう

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

// autoprefixer処理前
.b {
  grid-column: 1;
  grid-row: 1;
}

// 処理後
.container > *:nth-child(2) { // 詳細度的にこっちが優先になってしまう
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.b {
  grid-column: 1;
  grid-row: 1;
}

部分的に autoplace を有効にすることで解決した。特定のコンテナに /*! autoprefixer grid: autoplace */ を指定することで、そのコンテナ下のアイテムのみを自動配置させる。/*! にしておかないとsassコンパイルの設定によってはコメント扱いになって吹っ飛ばされてしまう。

autoprefixer({ grid: 'no-autoplace' })

.container {
  /*! autoprefixer grid: autoplace */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px;
  ...
}

同様にして、部分的に no-autoplace を有効にすることも可能。

6. アイテム要素はブロック要素である必要がある

// NG
<div class="container">
  <span class="item">A</span>
  <span class="item">B</span>
</div>

// OK
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

7. auto-fill は使えない

オイ！！！！！！