【CSS】CSS Grid Layoutで「聖杯レイアウト」を実現【IE11、Edge対応】

2017/07/21

CSS

code

CSS Grid Layoutで「聖杯レイアウト」を実現するサンプルはネットでいろいろ出てくるのですが、そのままIE11やEdgeで表示すると対応してないのかなぁ？という表示になります。どうやってIE11、Edge対応すればよいかといろいろ調べてみたところ、古い方式で書き足すみたいなことをすると対応できるようです。

実際にやってみたのが以下です。

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Holy Grail Layout with CSS Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="hg">
  <header class="hg-header">The Holy Grail Layout with CSS Grid</header>
  <main class="hg-main">
    main
  </main>
  <aside class="hg-left">Menu</aside>
  <aside class="hg-right">Ads</aside>
  <footer class="hg-footer">Footer</footer>
</body>
</html>

ベースとなるHTMLです。一部変更して、かつ分かりやすいように文字も入れてみました。

スタイルシート

上記のHTMLの「</head>」の前に以下のものをそのままコピペして入れてください。

<style>
.hg-header {
    background-color: #ffdb3a;
}

.hg-footer {
    background-color: rgb(100, 100, 100);
    color: #fff;
}

.hg-left,
.hg-right {
    background-color: rgb(230, 230, 230);
    text-align: center;
}

/* **************************
    Holy Grail Layout with CSS Grid
************************** */

/* Define grid areas */
.hg-header { grid-area: header; }

/*  IE edge */
.hg-header {
      -ms-grid-row: 1;
      -ms-grid-row-span:1;
      -ms-grid-column: 1;
      -ms-grid-column-span:5;
}

.hg-footer { grid-area: footer; }

/*  IE edge */
.hg-footer {
      -ms-grid-row: 5;
      -ms-grid-row-span:1;
      -ms-grid-column: 1;
      -ms-grid-column-span:5;
}
.hg-left { grid-area: navigation; }

/*  IE edge */
.hg-left {
      -ms-grid-row: 3;
      -ms-grid-row-span:1;
      -ms-grid-column: 1;
      -ms-grid-column-span:2;
}
.hg-right { grid-area: ads; }

/*  IE edge */
.hg-right {
      -ms-grid-row: 3;
      -ms-grid-row-span:1;
      -ms-grid-column: 5;
      -ms-grid-column-span:2;
}
/*  IE edge */
.hg-main {
      -ms-grid-row: 3;
      -ms-grid-row-span:1;
      -ms-grid-column: 3;
      -ms-grid-column-span:2;

      background-color: #ff00ff;
      display: block; /* 追記 */
}

.hg {
    display: grid;

    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr 
                        80px;
    min-height: 100vh;

    /*  IE edge */
    display: -ms-grid;
    -ms-grid-columns: 150px 0px 1fr 0px 150px;
    -ms-grid-rows: 100px 0px 1fr 0px 80px;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";

        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}
</style>

「/* IE edge */」と書いてあるところは、追記でかいて対応したところです。