今回はGrid Layout（グリッドレイアウト）を使用してレイアウトを組む方法についてまとめたいと思います。CSSでレイアウトを組む方法ではFlexboxも有名ですが、今回はGrid Layout（グリッドレイアウト）について焦点を当て、記事にまとめてみました。
Grid Layoutとは
Grid Layoutは、Webページの要素を2次元グリッドで配置するためのCSSのレイアウト方式です。Grid LayoutはFlexboxレイアウトに似ていますが、より柔軟性があり、複雑なレイアウトを作成することができます。
Grid LayoutはCSS Gridを使用して実装されます。グリッドは行と列に分割され、各要素はそれらの行と列の交差点に配置されます。各要素はグリッド内の位置を指定するためのプロパティを持ちます。
Grid Layoutは、Webページの要素をより効率的に配置することができます。例えば複数の要素を均等に配置する必要がある場合や、異なる画面サイズに対応する必要がある場合にGrid Layoutを使用することができます。またGrid LayoutはFlexboxと組み合わせて使用することもできます。
Grid Layoutを使ってみる
事前準備
まずは5つの色付きボックスを作成します。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
display: gridの指定
次に.containerに対してdisplay: grid;を設定します。
現時点で見た目は変わりませんが、これによりグリッドコンテナが作成されます。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
行数と列数の設定
続いてグリッドコンテナと行数と列数を設定します。
行数はgrid-template-rows、列数はgrid-template-columnsで指定することができます。grid-template-rowsとgrid-template-columnsを組み合わせることで、グリッドコンテナのサイズも設定することができます。
grid-template-rows: グリッドコンテナの行数を指定grid-template-columns: グリッドコンテナの列数を指定
今回は以下のように正方形ボックスを3列2行で作成します。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
位置の調整
最後にグリッドアイテムの位置を調整します。
位置の調整にはgrid-rowやgrid-columnを用いることで調整が可能です。
grid-row: グリッドアイテムの縦方向の位置を指定grid-column: グリッドアイテムの横方向の位置を指定
今回は以下のように水色のボックスを縦:横が1:2になる長方形を作成します。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
アイテム同士の隙間調整
以下の状態からスタートします。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
grid-column-gap
grid-column-gapを指定することでアイテム同士の横の隙間を調整することができます。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
grid-row-gap
grid-row-gapを指定することでアイテム同士の縦の隙間を調整することができます。
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
justify-content
justify-contentを指定することでアイテム同士に隙間を開けることができます。
space-between: アイテム同士の間を等間隔に空けますspace-around: 両端の隙間は間の隙間の半分になりますspace-evenly: 両端の隙間も間の隙間と同じになります
See the Pen
Untitled by Yoshiharu Chiba (@yc_1010)
on CodePen.
まとめ
- Grid Layoutは、Webページの要素を2次元グリッドで配置するためのCSSのレイアウト方式
grid-template-rowsはグリッドコンテナの行数を設定し、grid-template-columnsはグリッドコンテナの列数を設定grid-rowはグリッドアイテムの縦方向の位置を指定し、grid-columnはグリッドアイテムの横方向の位置を指定grid-column-gapを指定することでアイテム同士の横の隙間を調整することができるgrid-row-gapを指定することでアイテム同士の縦の隙間を調整することができるjustify-contentを指定することでアイテム同士に隙間を開けることができる
参考
Basics concepts of grid layout
今回はGrid Layout（グリッドレイアウト）を使用してレイアウトを組む方法について簡単に紹介しました。ここで紹介したレイアウトを組む方法はほんの一部に過ぎないため、気になる方はぜひ触ってみてください。
