今回は前回の記事のマークアップを元に、さらに理解を深めていきたいと思います。
セルの隙間の定義、fr単位やrepeat()を使用したフレキシブルなレイアウトを前回より踏み込んで学びます。
フレキシブルなグリッドレイアウト
まずはスタティックなグリッドレイアウトのCSSをみてみましょう。
grid-template-columns: 200px 20px 200px 20px 200px; grid-template-rows: auto 20px auto 20px auto;
上記の例では、幅640pxの固定サイズになります。emやremといった単位も使用する事が出来ます。
次の例で、パーセントを使用してフレキシブルに対応してみましょう。数値が合計100%になるように記載します。
grid-template-columns: 30% 5% 30% 5% 30%;
セル間の隙間を作る
上記の例ではgrid-template-columns内で1つのセルに隙間を割り当てていましたが、grid-column-gapやgrid-row-gap、またはショートハンドのgrid-gapを使用して、セルの隙間を作ることが可能です。まずはベースの部分を作成しましょう。
grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: auto auto auto;
ここで、同じ値をリピートさせる場合、repeat()を使用してスマートに記載することが可能です。
grid-template-columns: repeat(3, 33.33%);
ご覧いただいて解るかと思いますが、33.33%を3回繰り返して、3カラムになります。また、grid-template-rowsはデフォルトでautoのため、記載は必要ありません。そして、最終的に出来たコードが以下です。
grid-template-columns: repeat(3, 33.33%); grid-gap: 20px;
プレビューをみてみましょう。
See the Pen Grid3 by SCLIPPS (@sclipps) on CodePen.
ご覧のように隙間も出来て、フレキシブルなセルが完成しているかと思います。
frを使用してさらにシンプルに
frとはdisplay: grid;に対して使用できる単位で、Containerのサイズからfrの総数を分割した数値が1frのサイズになります。
以下の例を見てみましょう。
grid-template-columns: 1fr 1fr 1fr;
上記は、1セルの幅は33.33%と同等になります。
grid-template-columns: 2fr 1fr 1fr;
上記では、frが計4つあります。1つ目のセルは50%になり、残り2つのセルは各25%となります。
grid-template-columns: 100ox 2fr 1fr 10%;
また、上記のようにスタティックな値や、パーセントとの併用も可能です。
プレビューで見てみましょう。
See the Pen Grid4 by SCLIPPS (@sclipps) on CodePen.
最後に
今回は、Grid Layoutについてのより詳細な書き方をご紹介しました。レスポンシブ対応必須の時代で、CSS Grid Layout Moduleがフレキシブルなウェブサイトを作成するのにとても力強いプロパティであることがお分かりいただけたかと思います。
