ブログのお知らせ一覧や商品一覧など、カード型で繰り返し並ぶデザインの時に便利なのが『CSS Grid Layout』です。
要素を列と行の格子状に配置することができます。
規則的なレイアウトの場合、レイアウトの単位は『fr』だけを使うことが多いです。
そんな中、コンテンツのボリュームにあわせたレスポンシブなGrid Layoutを作ろうとしたときに『auto』『fr』への理解が足りず手こずってしまいました。
今回は、『auto』と『fr』の違いを、復習を兼ねてまとめてみました。
目次
『auto』と『fr』の動作の違い
| 特徴 | auto | fr |
| サイズの決定基準 | コンテンツのサイズ | 利用可能なスペースを分割 |
| コンテンツが多い場合の動作 | 列(行)幅が広がる | 列(行)幅は固定 |
『auto』は要素内のコンテンツ、『fr』は要素外のスペースに対して幅が決定する、というのが大きな特徴です。
図で比較したいと思います。
grid-template-columns: auto auto
flexを使っているときに近い感じですね
grid-template-columns: 1fr 1fr
『fr』同士であれば数値の通りなので、わかりやすいです
grid-template-columns: auto 1fr
私がてこずったのが、『fr』が『利用可能なスペースを分割』という性質であることを理解していなかった点です。
『auto』の方がそれっぽい名前なので、いままで勘違いしていました…。
上記以外にも、Grid Layout独特の性質や値があるので、詳しくは参考にしたページをご覧ください。
・ここを意識したらCSS Gridの扱いが少しだけ上手くなった話
https://code.vool.jp/blog/tips-of-css-grid/
中級者向け。各プロパティの挙動や注意点・コツがわかりやすくまとめてられています
・サクッとグリッドCSSを理解して、クライアントワークに使う
https://www.itti.jp/web-design/quick-css-grid/
初級～中級者向け。Gridへの基本の理解から、理解しやすくするためのジェネレーターの紹介まであり、図解も多くて優しいです
