【HTML，CSS】「grid column row」の使い方、そのイメージ

diplay:grid;

グリッドレイアウトは「display:grid;」を指定するだけ！！

その上でボックスを幅でいくつ区切るかを定義して、それぞれの子要素をどのマス目に配置するかを指定できる。

まず、（親要素）コンテンツ全体を囲っているボックすにdisplay:grid;指定！！

grid-template-columnプロパティとgrid-template-rowプロパティ

grid-template-columnは横方向に幅を指定した文だけ区切られる。

px指定だが、autoにすることで内容に合わせた指定が可能！！

次に子要素にグリッドセルをあてていく

grid-row, grid-columnプロパティを使う

grid-columnでは、縦の線の左から何番目から何番目の線の間に子要素を配置するかを指定する。例えば、開始の番号と修了の番号は「1/4」な感じ（１の線から４の線まで）

grid-column:1/4;開始１から終了４まで

grid-row:2;開始２から修了２まで

gird-template-areas, grid-areaプロパティ

grid-template-columns: 100px 200px 100px;
grid-template-columns: 100px 200px 100px;
grid-template-rows: auto auto auto; grid-template-areas: "head head head"
　"sub1 main sub2"
　　"foot foot foot"

これでグリッドレイアウトを作っている。めっちゃ簡単やん。。。。

またgrid-template系のレイアウトで「fr」fraction＝比

grid-template-column:1fr 2fr 3fr;はつまり１：２：３ってことや