レスポンシブレイアウトを作る！
メディアクエリを使わずにレスポンシブを実現するという記事に出会いました。
・さまざまな大きさのデバイスが登場している
・そのためコンテンツはウィンドウサイズによって流動的に表示されるべき
…というような時代の流れになっている、とのことでした。
そこで私も簡単なものを作ってみたいと思いました。
前回のポートフォリオ制作では、ほぼpx指定で実装していました。
今回のこのサイトでは、どこまでメディアクエリなしのレスポンシブ対応が
できるかチャレンジしてみました。
Gridを使った表組みのデザインはメディアクエリなしでも
レスポンシブ対応ができる代表的な方法だということで、
ぜひ身につけておきたいと思ったからです。
Gridによる表組み
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
vw, vh
基準となるビューポートの幅をvwで表すと100vw。つまり1vw = 1% になります。使いどころ：画面いっぱいに表示したい画像やセクション。
clamp()関数
最小値、推奨値、最大値を設定できます。widthとmax-widthとmin-widthを一緒に書いたのと同じです。
em, rem
emは親要素のフォントサイズを1とする単位。remはルート要素（html要素）のフォントサイズを1とする単位。
calc()関数
プロパティの値を指定するときに単位を揃えずに四則計算ができます。
使いどころ：widthやfont-sizeなどいろいろ。
コンテナクエリ
親要素の幅に基づいてスタイルを当てられます。注目の(?)新機能。Chrome Canary（今後登場する新機能を試しているChrome）で利用できるようです。
min()関数
値をカンマ区切りで指定しておくと、その中から最も小さい値を適用してくれます。相対単位と組み合わせて使います。
flex-basis
flex-basisに固定値を設定し、必要に応じてアイテムを拡大および縮小できるようにすると、メディアクエリを使用せずにコンポーネントを実装できます。
使いどころ：カードコンポーネント
Gridで要素を上下左右の中央寄せに
親要素でdisplay:gridに設定し、columnsとrowsの幅を指定します。あとは子要素にjustify-selfとalign-selfをcenterに設定するだけです。