（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

Grid Layout は、今ではほとんどのブラウザが実装しています。
IEは、9までは未対応、IE10, 11, Edgeの15 までは一部対応。Edge16以降は実装済み。

Can I use（2021年10月のスクショ↑）

ただ IE10, 11, Edge15 までは、標準仕様ではなくて Microsoft の独自プロパティでの対応です。それでも簡単な Grid layout なら表示させられます。

2020年の Edge 79 から Chromiumが採用され、2021年からは、EdgeHTMLベースの古い Edge のサポートが終了するそうなので、このMicrosoft の独自仕様が必要な古い IE や Edge はシェアが無くなって、特に覚える必要はない気がします。
が、一応 知識として今回はこの GridレイアウトでのMicrosoft の独自プロパティについてまとめておきます。古いブラウザも対象にしたサイトを作るときのために。

本日のINDEX

1. IE/Edge15まで の Grid Layout 用の独自プロパティ
2. Gridコンテナ側での指定は -ms- が必要
   1. 使える「値」と 値の「リピート」
3. Gridアイテム配置（IE10〜Edge15）
   1. セルをスパンする -ms-grid-row (column) -span
4. gapは使えないのでトラックに直接組み込む
5. Gridアイテムの整列（IE10〜Edge15）
6. コレは便利！ Autoprefixer CSS online で一発変換
7. サンプルファイルのHTMLとCSS

グリッドレイアウト関連のプロパティは、下記のように記事を分けています。

【62-1】Grid Layout の grid-template-rows, grid-template-columns

（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

【62-3】セルやエリアを一括指定する grid-templateショートハンド

【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns

【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる

【62-9】Grid Layout での order, position-absolute, z-index, margin

（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う　←今日はココ

参考：
・Grid layout (Windows) | Microsoft Docs

IE/Edge15まで の Grid Layout 用の独自プロパティ

IE10〜Edge15 までで使える Grid Layout用の独自プロパティを、標準仕様のプロパティと対応させて表にしました。

Gridコンテナ側に指定
標準仕様	Microsoft
display: grid	display: -ms-grid
display: inline-grid	---

標準仕様	Microsoft
grid-template-rows	-ms-grid-rows
grid-template-columns	-ms-grid-columns
（値）repeat( )関数	（値）repeat構文　(a, b) [n]
grid-template-areas	---
grid-auto-rows	---
grid-auto-columns	---
grid-auto-flow	---

Gridアイテム側に指定
標準仕様	Microsoft
grid-row	-ms-grid-row
grid-column	-ms-grid-column
（値）span値	-ms-grid-row-span
	-ms-grid-column-span

標準仕様	Microsoft
align-self	-ms-grid-row-align
justify-self	-ms-grid-column-align

Gridコンテナ側での指定は -ms- が必要

ここからは実際の指定の仕方です。
まずは Gridコンテナ側での指定。

IE10〜Edge15 までで、親要素をGridコンテナにするには、ベンダープレフィックスの -ms- がついた、-ms-gridで指定します。

body {
    display: -ms-grid;
    }

トラックサイズを決めるには、標準仕様の grid-template-rows と grid-template-columns の代わりに -ms-grid-rows と -ms-grid-columnsプロパティを使います。

body {
	display: -ms-grid;
	-ms-grid-rows: 80px 1fr 50px auto 50px;
	-ms-grid-columns: 1fr;
    }

エリア指定はできないので、トラックサイズの指定でグリッドを作ります。

使える「値」と 値の「リピート」

-ms-grid-rows と -ms-grid-columnsプロパティでは、以下の値が使えます。

Grid Layout のサイズ指定の値については、
（ちょっとメモ）サイズ指定で使う値についてをご覧ください。

<length>	単位を付けた数値
auto	アイテムの内容によってサイズが自動で決まります
min-content	アイテムの内容に合わせて最小値にする
max-content	アイテムの内容に合わせて最大値にする
minmax(min, max)	サイズの最小値・最大値を決めておき、画面サイズが変わっても、その値以下・以上にならないようにする
<flex>	単位「fr」を使った柔軟なサイズ指定

repeat( )関数は使えないのですが、代わりに repeat構文　(a, b) [n] があります。
下のCSSは、-ms-grid-columns で値を繰り返していますね。

div {
  display: -ms-grid;
  -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
  -ms-grid-rows: 1fr;
  }

これを repeat構文でコンパクトにまとめるとこうなります。

div {
  display: -ms-grid;
  -ms-grid-columns: 10px (250px 10px)[4];
  -ms-grid-rows: 1fr;
  }

Gridアイテム配置（IE10〜Edge15）

次にアイテム側での指定の仕方です。
IE/Edge15まで では「エリア名」での指定は不可なので、セルを指定してあげます。

標準仕様では grid-row と grid-columnプロパティで ライン番号などで指定しますが、 IE, Edge では、ラインという概念はなく、トラックを1から始まる数値で指定します。
-ms-grid-row と -ms-grid-column を使います。

div.header {
  -ms-grid-row: 1;    /*行は1トラック目*/
  -ms-grid-column: 1; /*カラムも1トラック目*/
  }
div.main {
  -ms-grid-row: 2;    /*行は2トラック目*/
  -ms-grid-column: 1; /*カラムは1トラック目*/
  }

IE, Edge では、標準仕様にある自動配置ができません。
ですので必ず -ms-grid-row と -ms-grid-column を使ってアイテムの配置を指定する必要があります。

セルをスパンする -ms-grid-row (column) -span

スパン（複数のセルをまたがってエリアにする）は、span値は使えず、代わりに用意されている -ms-grid-row-span や -ms-grid-column-span を使います。

div.header {
  -ms-grid-row: 1;    /*行は1トラック目*/
  -ms-grid-column: 1; /*カラムも1トラック目*/
  -ms-grid-column-span: 3; /*カラムは3トラック分*/
  }
div.main {
  -ms-grid-row: 2;    /*行は2トラック目*/
  -ms-grid-column: 1; /*カラムは1トラック目*/
  -ms-grid-row-span: 4; /*行は4トラック分*/
  }

gapは使えないのでトラックに直接組み込む

エリア間の「空き」を指定する gapプロパティ（次回やります）は、IE/Edge15まで では使えません。

そこで下の例のように、トラックサイズの指定で gap分もトラックとして組み込みます。
で、gap部分を避けてアイテム配置をすればOK。

body {
  display: grid;
  grid-template:
      "header header header"  110px
      "nav    main   sidebar" 1fr
      "footer footer footer"  60px
      / 18% 1fr 18%;
  grid-gap: 5px; /*for Safari*/
  gap: 5px;
  display: -ms-grid;
  -ms-grid-rows: 110px 5px 1fr 5px 60px;
  -ms-grid-columns: 18% 5px 1fr 5px  18%;
  }
header {
  grid-area:header;
  background:#000;
  color:#fff;
  -ms-grid-row:1;
  -ms-grid-column:1;
  -ms-grid-column-span:5;
  }
main {
  grid-area:main;
  background:lemonchiffon;
  -ms-grid-row:3;
  -ms-grid-column:3;
  }
nav {
  grid-area:nav;
  background:#a7d28d;
  -ms-grid-row:3;
  -ms-grid-column:1;
  }
aside {
  grid-area:sidebar;
  background:#e6bfb2;
  -ms-grid-row:3;
  -ms-grid-column:5
  }
footer {
  grid-area:footer;
  background:#a0d8ef;
  -ms-grid-row:5;
  -ms-grid-column:1;
  -ms-grid-column-span:5
  }

Gridアイテムの整列（IE10〜Edge15）

Gridアイテムの整列で使うプロパティは、Box Alignment Moduleに属するので、まだ記事にしていません（次回から書きます）が、一応紹介しておきます。

アイテムの整列のプロパティの中で align-self と justify-self に相当するものが、-ms-grid-row-align と -ms-grid-column-align です。

-ms-grid-row-align と -ms-grid-column-align で使える値は、center, end, start, stretch です。

div.Item2 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
  }

コレは便利！Autoprefixer CSS online で一発変換！

Autoprefixer CSS onlineは、ブラウザのCSS実装状況に合わせて必要なベンダープレフィックスを付けてくれるツールです。
ブラウザ上で簡単にコード変換できてめっちゃ便利です。

（クリックで別ウィンドウで開きます）

標準仕様で全アイテムを自動配置にしていても、IE/Edge 用は すべて固定配置に変換してくれるし、先程の gap の指定も自動的に変換してくれて、ほんっと親切。

いくつか使い方の注意点があります。
★メディアクエリを使ったとき、トラックサイズなどを略すと 当たり前だけど変換されない（@media内でも同じ指定をすべて書いてから変換させる）
★自動配置と固定配置の混在は変換できない（全部固定配置で書いて変換させる）
★ショートハンド grid-template では変換できない（ロングハンド grid-template-rows, grid-template-columns で書いて変換させる）

サンプルファイルのHTMLとCSS

最後に、標準仕様と IE/Edge用の指定を併記したサンプルソースを貼っておきます。
（このサンプルファイルは、【62-1】【62-2】で紹介したものと同じです）
（クリックでサンプルが別ウィンドウで開きます）

HTMLはこちら。

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Grid Layout サンプル：ほんっとにはじめてのHTML5とCSS3</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/sample62.css">
  </head>
  <body>
    <header>
     <h1>Grid Layout</h1>
    </header>
    <nav>nav</nav>
    <main>main</main>
    <aside>sidebar</aside>
    <footer>Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.</footer>
  </body>
</html>

CSSはこちら。
標準仕様と IE/Edge用の書き方を混ぜて書くと自分が混乱するので、別々にしています。

@charset "UTF-8";
html,body,header,footer,nav,aside,main.div {
	display:block;
    margin:0;
    padding:0;
	box-sizing:border-box}
body {
	background:#fff;
	color:#666}

/*format*/
header,footer,main,nav,aside{
	padding:1em;
    text-align:center}
header h1 {
	font-size:150%;
    line-height:1}

/*Grid Layout*/
body {  /*最初にスマホ用のレイアウトを指定しています*/
	height:100vh;
    display:grid;  /*Grid宣言*/
	grid-template:"header" 80px "main" 1fr "nav" 50px "sidebar" auto  "footer" 50px / 1fr}
header {
	grid-area:header;  /*エリア指定*/
	background:#000;
	color:#fff}
main {
	grid-area:main;  /*エリア指定*/
	background:lemonchiffon}
nav {
	grid-area:nav;  /*エリア指定*/
	background:#a7d28d}
aside {
	grid-area:sidebar;  /*エリア指定*/
	background:#e6bfb2}
footer {
	grid-area:footer;  /*エリア指定*/
	background:#a0d8ef;
	font-size:12px; line-height:1.3}
	
/*Grid Layout for IE/Edge*/
body {
	display: -ms-grid;
	-ms-grid-rows: 80px 1fr 50px auto 50px;
	-ms-grid-columns: 1fr}
header {-ms-grid-row: 1; -ms-grid-column: 1}
main {display:block/*for IE*/; -ms-grid-row: 2; -ms-grid-column: 1}
nav {-ms-grid-row: 3; -ms-grid-column: 1}
aside {-ms-grid-row: 4; -ms-grid-column: 1}
footer {-ms-grid-row: 5; -ms-grid-column: 1}

/*for PC Grid Layout*/
@media screen and (min-width: 600px) {  /*幅600px以上でのレイアウト*/
    body {
        grid-template:"header header header" 110px "nav main sidebar" 1fr "footer footer footer" 60px / 18% 1fr 18%;
		grid-gap:5px; /*for Safari*/
		gap:5px}
	header h1 {line-height:inherit}
	footer {font-size:14px; line-height:inherit}
	
	/*Grid Layout for IE/Edge*/
	body {
        -ms-grid-rows: 110px 5px 1fr 5px 60px;  /*IE/Edge15まではgapが使えないのでトラックで指定*/
        -ms-grid-columns: 18% 5px 1fr 5px  18%;
		}
	header {
        -ms-grid-row:1;
        -ms-grid-column:1;
        -ms-grid-column-span:5}
	nav {
        -ms-grid-row:3;
        -ms-grid-column:1}
	main {
		display:block/*for IE*/;
		-ms-grid-row:3;
		-ms-grid-column:3}
	aside {
		-ms-grid-row:3;
		-ms-grid-column:5}
	footer {
		-ms-grid-row:5;
		-ms-grid-column:1;
		-ms-grid-column-span:5}
}

次回予告

Grid Layout のグリッドの作り方はだいたい今回でおわりです。
次回からは、Grid Layout でも使う、整列や配置のためのプロパティを見てみましょう。

これらは Box Alignment Module にまとめられているプロパティたちです。
次回は、アイテムの間の「空き」を指定する gapプロパティを使ってみましょう。

マルチカラムのときに、カラム間の空きを指定するのに column-gapを使いましたが、gapプロパティは、この column-gap と row-gapプロパティの ショートハンドです。