目次
グリッドサイズの範囲を設定することができるminmax()についてと余白を均等に割り当ててくれるauto-fitの設定について。
- minmax()
- auto-fit
minmax()
・パソコンでサイトを見る場合ブラウザを伸ばしたり縮めたりすると右側に余白ができてしまう場合があります。gridでwdthを指定していてauto-fillに指定していると次のboxが入ってくるまで最後のboxの後に余白が空いてしまいます。
・今回は新しいboxが増えるまでは余白いっぱいまで均等に幅を広げるてみたいと思います。
・列の幅の指定をminmax(100px,1fr)にしてあげます。
・これは列の幅を 100px から 1fr の範囲にするように指定してあげることになり余白はboxに均等に割り振られます。
auto-fit
・ただここで、さらに広げていって、配置する要素がなくなったときにはまた右側が空いてしまいます。
・余白を作りたくない場合は、auto-fill を auto-fit にしてあげてください。余白はboxに均等に割り振られます。
