あまり使うことが少なかった display: grid について。
今まで「 display: flex; だけでいいじゃん」 とか思ってたんですが・・・
使ってみると、その便利さにおどろき！！
まあ "flexの上位互換" は言い過ぎですが、本当に便利です。
そこでその使い方を覚えておくために、
CSSでの
display: grid の使い方とかコード例 を色々まとめてみます。
このページの目次
まず display: flex の不便な点について‥
フレキシブルボックスは便利といえば便利
でも細かなとこに対応すると意外と苦労します。
たとえばこういう要素を作ったとしましょう。
|
1 2 3 4 5 6 7 8 9 |
<div class="flex-items"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> |
アイテム要素が６つ並んでいるようなレイアウト
この例を元に、不便なとこを挙げていくと次の２つです。
１．２列とか３列の列数指定がやりにくい
たとえば列数指定をこんな風にしたい場合・・・
- 均等に横２列に並べたい
- 折り返しありで３列にしたい
こういうとき display: flex は使いにくいですね。
▼ たとえば横３列均等に並べるCSSは次の通り
|
1 2 3 4 5 6 7 8 9 10 11 |
.flex-items{ display: flex; flex-wrap: wrap; width: 360px; } .flex-items .item{ width: calc(100% / 3 - 2px); height: 50px; margin: 1px; background: lightblue; } |
▼ 実際に横３列に並べたときの様子
気を付けないといけないのが、次の２つのポイント
- アイテムの幅は % で指定
この例なら、 １つの幅は 100% / 3 になる。割り切れない場合は calc関数を使う必要あり
- 余白も考慮しないといけない
上の例ではマージンを 1px 設定。なので calc(100% / 3 - 2px)のような指定も必要
正直言って、すごく面倒かもしれない・・
２．個別に列幅指定するのもやりにくい
あと個別に列幅指定するのもすごく面倒です。
均等だったらまだ楽だけど、個別だともっと難しくなります。
たとえばこんな幅指定をしたい場合。
- 折り返しアリで１行３列
- １列目は全体の50%の幅
- 他２列は全体の25%の幅
▼ こういう指定をするなら、次のCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.flex-items{ display: flex; flex-wrap: wrap; width: 360px; } /** １列目の幅指定 **/ .flex-items .item:nth-of-type(3n){ width: calc(100% / 2 - 2px); } /** ２列目・３列目の幅指定 **/ .flex-items .item:nth-of-type(3n+1), .flex-items .item:nth-of-type(3n+2){ width: calc(100% / 4 - 2px); } |
▼ 実際に個別に列幅指定したレイアウト例
上コードをもう一度見てみてください。
一見すると「ん？何やってんだこれ？」と混乱すること間違いなし
実は display: grid; を使えば、こんなことも簡単にできます。
flexよりも display: grid が便利な理由＆基本の作り方
それで display: grid がなぜ便利かについて
それは次の２つの理由があるから
- １行当たりの幅指定が楽
- 個別の列幅指定もかなり簡単
その名の通り grid（グリッド）を作るなら、これ以上に便利なものってないです。
たとえば一番簡単な グリッド作成の例 は次の通り
▼ まずはHTML例
|
1 2 3 4 5 6 7 8 9 |
<div class="grid-items grid-items-3"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> |
▼ そしてグリッドのCSS例
|
1 2 3 4 5 6 7 |
/** フレックス係数を使った指定。 * １行３列で、最後１列が前２つ分の幅 **/ .grid-items-1{ width: 360px; display: grid; grid-template-columns: 1fr 1fr 2fr; } |
この例のように・・・
- 親要素に display: grid; から設定、
- 列数は grid-template-columns から設定
- 子要素については基本的に構う必要なし
- 子要素のマージンとかも気にしなくていい
ちなみに次画像、これがこのCSSを適用したグリッドです。
何よりコードがシンプルだし、列数とかの指定も本当に楽。
あとマージン・パディングも合わせて計算してくれる優れものなんです。
列幅を grid-template-columns で指定する方法
そして display: grid; の最大の利点がコレ
列幅を均等にしたり、個別の列幅指定がかんたんなこと
指定は grid-template-columns を使えば、驚くほど簡単でした。
実際にどれだけ柔軟が指定ができるか、色々試したのが次のコードです。
１．repeat関数による列幅指定
まずは repeat関数 を使った列幅の指定
文字通り、列幅をリピートできるから、均等に列を分けたいときに便利です。
▼ 列幅指定のCSSコード例
|
1 2 3 4 5 6 |
/** repeat関数による列幅指定。 * 列数３で、幅は120pxで固定 **/ .grid-items-2{ display: grid; grid-template-columns: repeat(3, 120px); } |
▼ このCSSが適用されたグリッド
パーセント指定を使わず repeat(3, 120px) とか直感的な書き方が可能。
可読性もあがるし、コードも短くできます。
２．minmax関数による列幅指定
次は minmax関数 を使ったグリッド幅指定
▼ 実際に試したCSSコード例
|
1 2 3 4 5 6 7 |
/** minmaxによる指定。 * 列数５で幅は36px～72pxで自動調整 **/ .grid-items-3{ display: grid; grid-template-columns: repeat(5, minmax(36px, 72px)); } |
▼ このCSSを適用したグリッド
スマホとPCで列幅を変えたいとか、そういうとき便利かもしれません。
３．列ごとに条件をかえて幅指定
色々な関数組み合わせ、複雑に列幅指定も可能です。
▼ 実際に試してみたCSSコード例
|
1 2 3 4 5 6 7 8 |
/** * 複数の条件を列ごとに指定する。 * １行５列。minmax と repeat の合わせ技 **/ .grid-items-4{ display: grid; grid-template-columns: minmax(36px, 72px) repeat(3, 72px) 72px; } |
▼ このCSSを適用したグリッド
フレックスボックスよりも、直感的＆＆短く書けるのが利点ですね。
ここまでのまとめ
以上、display: grid は便利だよっていう話でした。
今までフレックスボックスを使うことが多かったので、
グリッドが必要なときはコチラの方も使っていきたいと思います。ではまたﾊﾞｲﾊﾞｲ
