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"
},