Gridの使い方で便利だなーと思った事例を紹介・解説したいと思います。Gridで横並びの要素をスクロールさせる要素を横並びにし、それを横スクロールさせます。見かける事例だと、記事やお知らせなどですね。スライダー系のライブラリで自動切り替えするのではなく、ユーザー自身にスクロール・スワイプしてもらう仕様です。column;を用いることで要素が水平方向に追加され、横スクロールを実装できます(もちろんoverflowの設定もお忘れなく)。親要素側で子要素の幅を管理できるので、カスタムプロパティなどと併用するとより直感的・楽に全貌を把握できます。レスポンシブグリッド要素を格子状に繰り返し配置します。いわゆるタイル型レイアウトですね。子要素の最低値を設定しつつ画面幅の遷移に自動で対応してくれます。メディアクエリ要らずで非常に便利ですね。コンテンツ幅からはみ出したレイアウトコンテンツ幅から任意の要素をはみ出させます。親要素にgridを宣言し、grid-template-columnsで3カラムのレイアウトを作成します。1/4;でカラム全体へと配置します。要素同士を重ねる画像の上にテキストを重ねます。親要素にgridを宣言します。1/-1;を適用しましょう。テキストの位置をjustify-contentで調整すればOKです。Gridの便利な使い方を紹介しました。個人的には長らくとっつきにくい印象だったのですが、慣れてきてからは非常に強力で頼れる武器だと感じております。「高校生のために、誰もが自分らしく自由に進路選択ができる社会をつくる。株式会社ライフマップは、高校生の「なりたい」を実現するために、”徹底的な高校生目線”で活動している企業です。ライフマップの現役エンジニアが、皆さんのお役に立つ知識をお届けします。「高校生のために、誰もが自分らしく自由に進路選択ができる社会をつくる。株式会社ライフマップは、高校生の「なりたい」を実現するために、”徹底的な高校生目線”で活動している企業です。ライフマップの現役エンジニアが、皆さんのお役に立つ知識をお届けします。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。