CSSグリットレイアウトを学び直す

格子状のマス目でWebサイトのレイアウトを作るのがグリッドレイアウト。授業で習ってよくわからなかった思い出。。
Gridコンテナー（親要素）とGridアイテム（小要素）で構成される。また間の隙間をGridギャップという。

↓基本的な書き方

<style>
.container{
    display:grid;
    grid-template-columns: 100px 200px 100px;
    gap:15px
}

</style>

・grid-template-columns
ー　横並び用
ー　↑のコードである、100px 200px 100pxは三つのブロックの列を作れる。もしもう一つ200pxを足すと４つ目の列が。
ー　さらにもし、100px 100px autoにしたら、autoの部分は残りの幅を取る
ー　fr=fraction（分数）
ー　さらにさらに。1fr fr 1frにしたら。。ページの伸び縮みに関わらず均等な３つのブロック列ができる。１：１：１
ーもし2fr 1fr 1frにしたら。。2frは1fr二つ分の幅を取る。ページの伸び縮みしても割合は保持される。２：１：１
ー　また300px 1fr 1frなど、他の単位で組み合わせ可能。この場合300pxは固定される。300px：１：１

・grid-template-rows
ー　縦並び用

・gap
ー　余白の指定
ー　column-gapは横の余白、row-gapは縦の余白
ー　gap:20px 15px;みたいに一括指定できる

・repeat
ー　繰り返しの指定ができる
ー　grid-template-columns:1fr 1fr 1fr;みたいなのを、grid-template-columns:repeat(3, 1fr);というふうに簡略化

・minmax
ー　最小値と最大値が指定できる
ー　ページ幅を狭めるときのこれ以上は凝縮すんな！っていう設定
ー　minmax(最小値,最大値)→grid-template-columns:repeat(3, minmax(200px, 1fr));
ー　これは２00px以上は凝縮させないぜってゆー

・auto-fill
ー　グリッドコンテナー（親要素）の大きさに合わせて繰り返す。repeat関数と一緒に使う
ー　repeat(auto-fill,　値)
ー　グリッドコンテナーにスペースが余る時に空のグリッドが作られる。

・auto-fit
ー　グリッドコンテナー（親要素）の大きさに合わせて繰り返す。repeat関数と一緒に使う
ー　repeat(auto-fit,　値)
ー　グリッドコンテナーにスペースが余る時にそこは余白に。1frだとどこまでも。