前回のブログでは grid layout の分割の考え方と、簡単な書き方について説明しました。
これだけ覚えておけば基本的にはgrid layoutを利用して柔軟なページデザインを作成することができるのですが、配置ルールに関する他のプロパティや、プロパティに指定する値の単位などを理解すると、より複雑な要求に対応できたり、より少ない記述量で実装できたりします。
今回は特に使えると私が思うものについて、実際のデザイン要求から逆引きする形でいくつか説明していきたいと思います。
なお、前回のサンプルコードをそのまま引き継ぎ一部変更する形でご紹介していくので、前回のブログもご参照ください。
1．レスポンシブデザイン対応として一部のマスの大きさを変えたい！
前回紹介した例ではプロパティ値に指定する単位として viewport単位の vwを利用することで各要素の縦横比を維持し、ブラウザの横幅に合わせて要素をリサイズしていました。
実際にはブラウザの横幅に合わせて画面全体をリサイズする場面ばかりではありません。
例えば広告を表示する領域はバナーの都合で大きさを固定したい、などの要求があるとします。このような場合に利用するのが、frという単位です。まずはコードを見てみましょう。
div.blog-area {
display: grid; /* 要素内部がgrid layoutであることを示す */
grid-template-rows: 12.5vw 25vw 12.5vw 25vw; /* gridの行分割の高さをそれぞれ指定している。今回は4行。 */
grid-template-columns: 1fr 400px; /* 広告領域の含まれる列幅を400pxで固定し、残った部分を1frで指定している。 */
}
div.title-area {
grid-column: span 2; /* 列方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}
div.main-contents,
div.advertisement-area {
grid-row: span 2; /* 行方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}前回からはgrid-template-columnsプロパティの値を変更しています。
このプロパティはgridの横幅を指定するものでしたが、広告領域が含まれる2列目の横幅を400pxで指定し、残った1列目を1frと指定しています。
frは、この単位が指定されている行または列で親要素の空間を埋めるという意味の単位になります。
今回はfrが指定されている列が1列だけです。この場合、他の列(今回は400pxと指定されています)が幅を確保した残りの空間をfrが指定されている列で埋めます。
frが指定されている列が複数ある場合、その指定された値の割合で空間を埋めます。
例えば、1frと2frが指定された2列がある場合、親要素の空間を1:2の割合で埋める、ということになります。grid-template-rowsを以下にして実験してみてください。
height: 100%;
grid-template-rows: 200px 2fr 1fr 400px;※div要素の高さは明示的に100%を指定しないと親要素の高さに合わないのでheightプロパティの追加を忘れずに！
ちなみに、このfrはIE11, edgeにも対応しているため、ベンダプリフィックスなどは不要です。
2．gridで制御したい要素数が不定だけどいい感じにしたい！
ここまでご紹介した方法では、grid layoutを利用する領域をあらかじめ決められた数に分割していました。しかし、実際にシステム開発するとなるとあらかじめ決めておけるケースばかりではありません。
例えば何かを検索するシステムでは返ってくる件数は常に変わります。ページングをうまく設計して表示される件数を一定にすることは可能ですが、最近はページャをクリックするより最下部までスクロールしたら次のページを取得して追加、のようなUIが流行りです。
この要求は grid-auto-rows / grid-auto-columns プロパティを利用することで実現できます。
例によってまずはコードを見てみましょう。
div.blog-area {
display: grid; /* 要素内部がgrid layoutであることを示す */
grid-auto-rows: 12.5vw 25vw; /* gridの行分割の高さをそれぞれ指定している。12.5vwと25vwの行が繰り返される。 */
grid-template-columns: 62.5vw 37.5vw /* gridの列分割の幅をそれぞれ指定している。今回は2列。 */
}
div.title-area {
grid-column: span 2; /* 列方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}
div.main-contents,
div.advertisement-area {
grid-row: span 2; /* 行方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
}grid-template-rowsの代わりにgrid-auto-rowsを指定しています。このプロパティは明示的に高さ(幅)を指定されたマス外に要素が存在する場合、自動的にgrid-auto-rowsで指定した高さ(幅)で領域を拡張し要素を配置する、というプロパティです。今回の例では、
1行目は12.5vw、2行目は25vw、3行目は繰り返しで12.5vw、、、
というように自動で領域が拡張されます。
明示的にマスの高さ(幅)を指定する、というのはgrid-template-rows(grid-template-columns)などによって実装されます。前回のブログでは明示的に高さを指定していたというわけですね。ですので、grid-template-rowsとgrid-auto-rowsは同時に指定することができます。
例えば以下のように指定した場合だと、ヘッダ部分の高さは明示的に指定、あとは自動的に要素の幅を繰り返す、ということができます。
grid-template-rows: 20vw; /* ヘッダ部分の高さ指定。 */
grid-auto-rows: 25vw 12.5vw; /* 25vwと12.5vwの行が繰り返される。2行目から領域が拡張されるため、25vwから始めている。 */このプロパティは要素数がものすごく多い場合に重宝します。gridを細かく切ってたくさんの要素を敷き詰めることで非常に情報量の多いページを作成することが可能です。
しかし残念なことに grid-auto-rows / grid-auto-columns はIE11, edgeにはベンダプリフィックスの形を含め対応するプロパティがありません。(※2018年3月現在)
PC対象のシステムではまだIE対応を求められることが主流ですので、このプロパティはスマホデザインなどに利用するとよいでしょう。
実は前回紹介した以外の記法の多くはでIE11, edgeに対応していません。(※2018年3月時点)
前回も書いた通り、ベンダプリフィックスの形ではない正式対応も表明されているので、習得しておくと将来役に立つと思います。
