CSS Gridを少し触ってみたので使い方をメモ。
対応ブラウザ
IEではベンダープレフィックスと合わせて古いバージョンの仕様での記述が必要になるようです。
今回のサンプルではIEの対応は省略していますのでご注意ください。
使い方
例として以下のようなHTMLを用意します。
<div class="wrapper"> <div class="box box1">box1</div> <div class="box box2">box2</div> <div class="box box3">box3</div> <div class="box box4">box4</div> <div class="box box5">box5</div> <div class="box box6">box6</div> <div class="box box7">box7</div> </div>
.wrapperがグリッドのコンテナ(親要素)、.boxがグリッド要素になります。
.wrapperに対してdisplay: gridを指定します。
.wrapper {
display: grid;
}
これで.wrapperの子要素の.boxがグリッド要素になりましたが、これだけだと1列のグリッドが作成されただけなので表示上は特に変化がありません。
display: gridのデモページ
grid-template-columnsを合わせて指定することで、グリッドの列の設定を行えます。
.wrapper {
display: grid;
grid-template-columns: 100px 200px 300px;
}
grid-template-columnsの値は半角スペースで区切ることで、左から順にそれぞれの列の幅の指定になります。
この場合は値を3つ指定しているので、左から幅100px,200px,300pxの3列になりました。
grid-template-columnsのデモページ
grid-template-rowsはグリッドの行の設定を行えます。
.wrapper {
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: 50px 100px;
}
この場合は1行目は高さ50px、2行目は高さ100pxになり、3行目は指定していないので高さの指定が無い状態になります。
grid-template-rowsのデモページ
上記サンプルの3行目のように、grid-template-rowsで設定した範囲外の高さを設定したい場合などはgrid-auto-rowsを使用します。
.wrapper {
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: 50px 100px;
grid-auto-rows: 200px;
}
列の場合は同様にgrid-auto-columnsを使用します。
IEで対応する場合
上記サンプルをIEにも対応する場合、ベンダープレフィックス(-ms-)の付与だけでなくグリッド要素の配置の指定も必要になります。
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 100px 200px 300px;
grid-template-columns: 100px 200px 300px;
-ms-grid-rows: 50px 100px;
grid-template-rows: 50px 100px;
}
.wrapper > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.wrapper > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.wrapper > *:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.wrapper > *:nth-child(4) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.wrapper > *:nth-child(5) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
.wrapper > *:nth-child(6) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
.wrapper > *:nth-child(7) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}
グリッド要素に設定しているgrid-columやgrid-rowについては後述しますが、グリッド要素個別に配置の指定が必要になります。
IE対応のデモページ
fr
グリッドのサイズにはfrという単位を指定することができます。
frはグリッドコンテナ内で使用可能な空間を指定した値で配分します。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
この場合3列とも1frなので、3等分になります。
frのデモページ
異なる単位を使って指定することもできます。
.wrapper {
display: grid;
grid-template-columns: 300px 2fr 1fr;
}
この場合は利用可能な空間のうち300pxを左の列が使用して、残りの空間を3分割して真ん中が2、右が1で配分されます。
frのデモページ2
repeat()
同じ値を繰り返す場合、repeat()を使って省略することもできます。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
repeat()の1つ目の引数が繰り返す回数、2つ目の引数が繰り返す内容になります。
この場合は1frを3回繰り返すので、grid-template-columns: 1fr 1fr 1fr; と同じ意味になります。
repeat()のデモページ
repeat()の繰り返す内容は複数指定もできます。
.wrapper {
display: grid;
grid-template-columns: 300px repeat(2, 1fr 2fr) 50px;
}
この場合は1fr 2frを2回繰り返すので、左の列から順に300px,1fr,2fr,1fr,2fr,50pxの6列になります。
repeat()のデモページ2
minmax()
minmax()はグリッド要素の最小値と最大値を指定できます。
HTMLを少し修正して、グリッド要素のbox2だけコンテンツ量を増やしてみます。
<div class="wrapper"> <div class="box box1">box1</div> <div class="box box2"> box2 <p>example text.</p> <p>example text.</p> <p>example text.</p> </div> <div class="box box3">box3</div> <div class="box box4">box4</div> <div class="box box5">box5</div> <div class="box box6">box6</div> <div class="box box7">box7</div> </div>
minmax()を使ってみます。
1つ目の引数が最小値、2つ目の引数が最大値になります。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
これで高さの最小値は100px、最大値はauto(内容に合わせて広げる)になりました。
minmax()のデモページ
grid-column-start / grid-column-end / grid-row-start / grid-row-end
grid-column-start / grid-column-end / grid-row-start / grid-row-endはそれぞれグリッド要素の配置位置を指定します。
以下の3列3行のグリッドの場合、グリッドを分割する線は4本ずつになります。
grid-column-start / grid-column-end / grid-row-start / grid-row-end はこのグリッド線の番号を値として指定します。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.box2 {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 4;
}
.box1は列がグリッド線の1つ目～4つ目、行が1つ目～2つ目の配置、.box2は列がグリッド線の1つ目から1つ分、行が2つ目～4つ目の配置になります。
grid-column-start / grid-column-end / grid-row-start / grid-row-endのデモページ
grid-columnやgrid-rowでまとめて指定することもできます。
「 / 」で区切って開始位置と終了位置を指定します。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.box2 {
grid-column-start: 1;
grid-row: 2 / 4;
}
column-gap / row-gap
column-gap / row-gapはグリッド要素間の間隔を設定できます。
要素間の間隔なので、グリッド要素が隣接しない端の要素には間隔は追加されません。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
column-gap: 20px;
row-gap: 50px;
}
列の間は20px、行の間は50pxになりました。
column-gap / row-gapのデモページ
グリッドの入れ子
グリッド要素をグリッドコンテナにして、グリッドを入れ子にすることもできます。
<div class="wrapper"> <div class="box box1"> <div class="nest">nest1</div> <div class="nest">nest2</div> <div class="nest">nest3</div> <div class="nest">nest4</div> </div> <div class="box box2">box2</div> <div class="box box3">box3</div> <div class="box box4">box4</div> <div class="box box5">box5</div> <div class="box box6">box6</div> <div class="box box7">box7</div> </div>
入れ子にするグリッド要素に対してdisplay: gridを指定すればOKです。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 100px;
}
.box1 {
grid-column: 1 / 4;
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.box2 {
grid-column-start: 1;
grid-row: 2 / 4;
}
【参考サイト】
コメントが承認されるまで時間がかかります。