【CSS】便利だなと思ったCSS Gridの使い方を紹介！
はじめに
今回の記事では、CSS Gridの使い方で便利だなーと思った事例を紹介・解説したいと思います。
Gridで横並びの要素をスクロールさせる
要素を横並びにし、それを横スクロールさせます。
よく見かける事例だと、記事やお知らせなどですね。スライダー系のライブラリで自動切り替えするのではなく、ユーザー自身にスクロール・スワイプしてもらう仕様です。
gridとgrid-auto-flow: column;を用いることで要素が水平方向に追加され、横スクロールを実装できます（もちろんoverflowの設定もお忘れなく）。
親要素側で子要素の幅を管理できるので、カスタムプロパティなどと併用するとより直感的・楽に全貌を把握できます。
レスポンシブグリッド
要素を格子状に繰り返し配置します。いわゆるタイル型レイアウトですね。
grid-template-columnsにrepeat()とminmaxを用いることで、
子要素の最低値を設定しつつ画面幅の遷移に自動で対応してくれます。メディアクエリ要らずで非常に便利ですね。
コンテンツ幅からはみ出したレイアウト
コンテンツ幅から任意の要素をはみ出させます。こんな具合ですね。
親要素にgridを宣言し、grid-template-columnsで3カラムのレイアウトを作成します。基本的には全てのコンテンツを真ん中のカラムに配置、任意の要素だけgrid-column: 1/4;でカラム全体へと配置します。
要素同士を重ねる
画像の上にテキストを重ねます。
まずは親要素にgridを宣言します。次に、重ねたい要素同士にgrid-area: 1/-1;を適用しましょう。テキストの位置をjustify-contentで調整すればOKです。
まとめ
CSS Gridの便利な使い方を紹介しました。個人的には長らくとっつきにくい印象だったのですが、慣れてきてからは非常に強力で頼れる武器だと感じております。
対応ブラウザの懸念も大分払拭されていますので、同じくちょっと踏み出せていない方もぜひお試しください！
Discussion