CSS Grid

CSS Gridとは

CSS Gridは、ウェブページの要素を行と列の二方向に配置できるCSSのレイアウト方式です。グリッド線、トラック、セル、エリアを使って位置と大きさを設計します。

どんな場面で使うか

ページ全体の区画、カード一覧、画像と文章を組み合わせたレイアウトなど、縦横の対応関係を保ちたい場面で使います。画面幅に応じて列数を自動調整する設計もできます。

選ぶとき・使うときのポイント

Flexboxとの優劣ではなく用途で使い分けます。行か列の一方向を中心に並べるならFlexbox、行と列の両方を制御するならCSS Gridが考えやすい傾向があります。