今回はWEBデザインにおいて重要な役割を担うdisplay:gridについて、初心者でも分かりやすく解説していきます。
display:gridとは？
display:gridは、CSSグリッドレイアウトを扱うためのプロパティの一つです。
CSSグリッドレイアウトは、ボックスモデルに基づいた要素の配置方法を改良したもので、グリッド状に要素を配置することができます。
display:flexと比較して、より柔軟性があり、より複雑なレイアウトを実現することができます。
display:gridの基本的な使い方
display:gridを使用するには、まずグリッドを作成する必要があります。
グリッドは、grid-template-rowsとgrid-template-columnsで指定される行と列の配置で構成されます。
たとえば、以下のように指定することで、2行3列のグリッドを作成することができます。
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr 1fr;
}この例では、100ピクセルと200ピクセルの2つの行と、1:2:1の比率で3つの列が作成されます。
次に、要素をグリッドに配置するためには、grid-rowとgrid-columnを使用します。
たとえば、以下のように指定することで、.item1クラスの要素をグリッドの1行目の2列目から3列目までに配置することができます。
.item1 {
grid-row: 1;
grid-column: 2 / 4;
}display:gridの高度な使い方
display:gridは、より複雑なレイアウトを実現するための多くの機能を備えています。
以下では、いくつかの高度な使い方を紹介します。
grid-template-areasを使用したレイアウトの定義
grid-template-areasを使用することで、グリッドのレイアウトをより直感的に定義することができます。
たとえば、以下のように指定することで、2行3列のグリッドを作成し、3つの要素をレイアウトすることができます。
.container {
display: grid;
grid-template-areas:"header header header" "main main sidebar" "footer footer footer";
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 2fr 1fr;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: main;
}
.item3 {
grid-area: sidebar;
}
.item4 {
grid-area: footer;
}この例では、grid-template-areasで3つのエリアを定義し、それぞれに適した要素をgrid-areaで配置しています。
grid-auto-flowを使用した自動配置
grid-auto-flowプロパティを使用することで、自動的に要素を配置することができます。
たとえば、以下のように指定することで、自動的に要素をグリッド内に配置します。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}この例では、grid-template-columnsで3つの列を定義し、grid-auto-rowsで行の高さを指定しています。
そして、grid-auto-flowをdenseに設定することで、要素が空いている場所を埋めるように自動配置されます。
まとめ
display:gridは、より柔軟性があり、より複雑なレイアウトを実現することができるCSSグリッドレイアウトの一つです。
基本的な使い方から高度な使い方まで、いくつかの例を用いて詳しく解説しました。
ぜひ、実際に使ってみてください。
