CSS Grid
こちとらぶっちゃけflexレイアウトの理解もあやふやなのに世は大gridレイアウト時代
やばい
とりあえず概要をつかむ
べ、便利〜〜〜〜〜
親要素のgrid-template-columnsとgrid-template-rowsでカラムの数や幅を設定して、
子要素にそれぞれgrid-column-startとgrid-column-endを指定してよしなに配置すると
マークアップの順序と配置を連動させなくて済むから、一度理解してしまえばメンテが楽そう
自分の用途だと要素を横並びにすることがあまりないから出番は少なそうだけど、とにかくめちゃくちゃ便利だということは分かる
これを試すためになんかサイト作りたいレベル
row(column)-gapは、グリッドアイテムの間にだけ余白ができるようになっています
う、うわ〜〜〜〜〜便利すぎじゃん！！！！！
全部にマージン設定してnth-childで打ち消すみたいなことが必要ないってことでしょ
神では？
frっていう単位もまた便利でいいな
いいな……
Chrome、Firefox、Safari、Edgeの最新バージョンで利用可能、IE10以上では-ms-のベンダープレフィックス付きでサポートされている
ベンダープレフィックスつければ実用に足る感じか
iOS Safariの10.3以上とChrome for Android、Android標準ブラウザでGrid Layoutがサポートされています
モバイル端末もこれだけ対応してれば十分なんじゃないかなー
実際どう使おう
Grid Layoutが完全にFlexboxの上位互換というわけでもなさそう
適材適所っぽい
このへんも読んどこう
必要に応じて都度ぐぐる
カラム幅を優先的によしなにしたい（？？？）けどwidthの数値はわかんないよ〜みたいなとき、
auto 1frにしておけば「autoの残りを1frとする」みたいなことができる
神では？