ある日、僕の元に渡ってきたコードに普通に書いてあった
display:grid;
あかん！！ flexじゃねぇ！！！
ヒゲダン鼻歌歌ってる場合じゃねぇ！
ヤバい、、、と思いました。
なんとなく聞いたことはあった、どうにか調べて解決したけど、その場しのぎで全くわかってねぇ！
これは次きたらマズイと思い、自戒の念も含めこの記事を書こうと思います。(書くと理解するから)
１、flexboxと何が違うの？使い分けは？
どうやらGrid Layoutを使うと、
HTMLの記述がシンプルで短くなる(flex用のdivがめっちゃ増えるのを防げる)
シンプルな横並びとか、タイルのレイアウトならflexboxでいいけど
複雑なtableみたいなレイアウトだと、display:grid;のが向いてるみたい。
入門
これはflexでも簡単そうだけど、、基本として
2、display:grid;ってどこに指定するの？
flexと一緒で親要素に指定するそうです。
また、親要素（いつもdisplay:flex;かけてたとこ）を
Gridコンテナ
それぞれの子要素を
Gridアイテム
と呼ぶそうです！
３、さぁまずはHTMLや！
HTML書きます！簡潔！
<div id="container">
<div id="item_header">ここヘッダー</div>
<div id="itemA">A</div>
<div id="itemB">B</div>
<div id="item_footer">ここフッター</div>
</div>
４、そしてCSS
これで準備完了！！！！
#container {
display: grid;
width: 500px;
height: 300px;
}
５、まずは行の縦幅の調整 grid-template-rows
#container {
display: grid;
width: 500px;
height: 300px;
grid-template-rows: 50px auto auto 100px;
/* それぞれのheight ピンクが50px、肌色と青可変、グレー100px */
}
こんな結果になります！
autoは#containerの高さに応じて、可変します！便利！
６、次はgrid-template-columnsで列の横幅調整！
#container {
display: grid;
width: 500px;
height: 300px;
grid-template-rows: 50px auto auto 100px;
grid-template-columns:1fr 100px;
}
こんな感じになりました！（レイアウトがぶっ壊れましたね。。このあと調整します。）
ここであえて使った 1frというのは、残り全てという意味です。
今回だったら、100px意外全てのwidthという意味ですね。
肌色の部分はちゃんと100pxになってますね！
そしてここで検証ツールで出てきてくれた数字がすっごく役にたちます(神)
７、バラバラになったアイテムの位置を指定する(grid-row、grid-column)ここが曲者、、
アイテムの配置指定は、
grid-rowgrid-columnを使用します。
これは番号で指定するようなのですが、
例えばheaderの赤い部分
横（行）の幅が番号でいうと、
1番 ~ 2番なので、grid-row:1/2;という風に指定するそうです。
縦(列は)全ての列を含んでいて、1番~4番なので
grid-column:1/4;
と指定するそうです！
↑
難しいので手を動かさないとわからないと思います
この部分は、この記事がわかりやすかったです。(全体的にも)
正直慣れるまで難しいと思ったので、これは検証ツール見ながらやった方がいいと思いました！！！！
こんな感じですね。
コード全て載せときます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
height: 300px;
width: 500px;
display: grid; /* グリッドレイアウト */
grid-template-rows: 50px auto auto 100px;
grid-template-columns:1fr 100px;
}
#item_header{
background: #E16162;
grid-row: 1/2;
grid-column: 1/4;
}
#itemA{
background: #FFEED0;
grid-row: 2 / 4;
grid-column: 1/2;
}
#itemB{
background: #72A6EF;
grid-row: 2/ 4;
grid-column: 2/4;
}
#item_footer{
background: #B2AFAF;
grid-row: 4 / 5;
grid-column: 1/5;
}
</style>
</head>
<body>
<div id="container"> <!-- コンテナ -->
<div id="item_header">ここヘッダー</div> <!-- アイテム -->
<div id="itemA">A</div> <!-- アイテム -->
<div id="itemB">B</div> <!-- アイテム -->
<div id="item_footer">ここフッター</div> <!-- アイテム -->
</div>
</body>
</html>
以上！
あとは先ほどの記事とか見ながら上級版をやってみてください。
ざっくり入門の記事でした！
変なとこあったらコメントいただけると嬉しいです。