CSS Gridの現状

レイアウト用のcssプロパティと言えば、古くはfloatや最近ではflexboxが主流ですが、
主要モダンブラウザの対応によりCSS Gridも選択肢に入ってきました。
意外や意外、IE11も対応してるんですね。

Can i use

ただ、IE11は古い仕様のCSS Gridにしか対応していません。
ですので、実際にはAutoprefixerで変換する必要があります。

手軽なのはオンライン版のAutoprefixerです。
https://autoprefixer.github.io/

HTMLソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>CSS Grid</title>
</head>

<body>
  <div class="container">
    <header class="header">header</header>
    <aside class="aside">aside</aside>
    <main class="main">main</main>
    <nav class="nav">nav</nav>
    <footer class="footer">footer</footer>
  </div>
</body>
</html>

CSS(モダンブラウザ)


html, body {
  margin: 0;
  padding: 0;
  font-size: 24px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.container  {
  min-height: 100vh;
  height: 100%;
  display: grid;
  grid-template:
  "header header header" 1fr
  "aside main nav" 3fr
  "footer footer footer" 100px /
  220px 1fr 220px;
  gap: 40px 10px;
}

.container > * {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  background-color: red;
  width: 100%;
  height: 100%;
  grid-area: header;
}

.aside {
  background-color: green;
  height: 100%;
  grid-area: aside;
}

.main {
  background-color: blue;
  grid-area: main;
}

.nav {
  background-color: yellow;
  grid-area: nav;
}

.footer {
  background-color: purple;
  width: 100%;
  grid-area: footer;
}

モダンブラウザでは綺麗にレイアウトされています。↓

cssの記述と実際の画面を比較してみると、割と直感的だったりします。

しかし、IE11では...

全ての要素が縦に積まれており、header要素が画面を埋め尽くしています。

では、AutoprefixerでIE対応してみましょう。

CSS（IE11対応版）


html, body {
  margin: 0;
  padding: 0;
  font-size: 24px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.container  {
  min-height: 100vh;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 40px 3fr 40px 100px;
  -ms-grid-columns: 220px 10px 1fr 10px 220px;
      grid-template:
  "header header header" 1fr
  "aside main nav" 3fr
  "footer footer footer" 100px /
  220px 1fr 220px;
  gap: 40px 10px;
}

.container > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  background-color: red;
  width: 100%;
  height: 100%;
  grid-area: header;
}

.aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  background-color: green;
  height: 100%;
  grid-area: aside;
}

.main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  background-color: blue;
  grid-area: main;
}

.nav {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  background-color: yellow;
  grid-area: nav;
}

.footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  background-color: purple;
  width: 100%;
  grid-area: footer;
}

おまけ：npmを使う場合

npm init -y
npm i -D node-sass postcss-cli autoprefixer

package.json

{
  "name": "cssgrid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node-sass ./scss/style.scss -o ./css",
    "autoprefixer": "postcss ./css/style.css --use autoprefixer -d ./css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.5",
    "node-sass": "^4.13.1",
    "postcss-cli": "^7.1.0"
  }
}

CSS Gridのオプションを設定するには、scssまたはcssファイル冒頭にコメントを追記

style.scss

/* autoprefixer grid: autoplace */

~以下略~

または、タスク実行時に環境変数を頭につける

AUTOPREFIXER_GRID=autoplace npm run autoprefixer

もしくは、設定ファイルを作成

postcss.config.js

module.exports = () => ({
  plugins: {
    'autoprefixer': {
      grid: "autoplace"
    }
  }
})

package.json

  "scripts": {
    "build": "node-sass ./scss/style.scss -o ./css",
    "autoprefixer": "postcss ./css/style.css -d ./css -c=postcss.config.js"
  },