flexの上位互換?超便利な display grid の使い方&コード例

あまり使うことが少なかった display: grid  について。

今まで「 display: flex;  だけでいいじゃん」 とか思ってたんですが・・・

使ってみると、その便利さにおどろき!!

まあ "flexの上位互換" は言い過ぎですが、本当に便利です。

そこでその使い方を覚えておくために、
CSSでの display: grid  の使い方とかコード例 を色々まとめてみます。

まず display: flex の不便な点について‥

フレキシブルボックスは便利といえば便利

でも細かなとこに対応すると意外と苦労します。

たとえばこういう要素を作ったとしましょう。

アイテム要素が6つ並んでいるようなレイアウト

この例を元に、不便なとこを挙げていくと次の2つです。

1.2列とか3列の列数指定がやりにくい

たとえば列数指定をこんな風にしたい場合・・・

  • 均等に横2列に並べたい
  • 折り返しありで3列にしたい

こういうとき display: flex  は使いにくいですね。

 

▼ たとえば横3列均等に並べるCSSは次の通り

▼ 実際に横3列に並べたときの様子

display: flexを使い、横3列で並べたレイアウトの例

気を付けないといけないのが、次の2つのポイント

  • アイテムの幅は % で指定
    この例なら、 1つの幅は 100% / 3 になる。割り切れない場合は calc関数を使う必要あり
  • 余白も考慮しないといけない
    上の例ではマージンを 1px 設定。なので calc(100% / 3 - 2px)のような指定も必要

正直言って、すごく面倒かもしれない・・

2.個別に列幅指定するのもやりにくい

あと個別に列幅指定するのもすごく面倒です。

均等だったらまだ楽だけど、個別だともっと難しくなります。

 

たとえばこんな幅指定をしたい場合。

  • 折り返しアリで1行3列
  • 1列目は全体の50%の幅
  • 他2列は全体の25%の幅

▼ こういう指定をするなら、次のCSS

▼ 実際に個別に列幅指定したレイアウト例

フレックスボックスで列ごとに幅指定したレイアウト例。こんな複雑なレイアウトも display: grid: を使えばスマートに書ける

上コードをもう一度見てみてください。

一見すると「ん?何やってんだこれ?」と混乱すること間違いなし

実は display: grid;  を使えば、こんなことも簡単にできます。

flexよりも display: grid が便利な理由&基本の作り方

それで display: grid  がなぜ便利かについて

それは次の2つの理由があるから

  • 1行当たりの幅指定が楽
  • 個別の列幅指定もかなり簡単

その名の通り grid(グリッド)を作るなら、これ以上に便利なものってないです。

 

たとえば一番簡単な グリッド作成の例 は次の通り

▼ まずはHTML例

▼ そしてグリッドのCSS例

この例のように・・・

  • 親要素に display: grid;  から設定、
  • 列数は grid-template-columns  から設定
  • 子要素については基本的に構う必要なし
  • 子要素のマージンとかも気にしなくていい

ちなみに次画像、これがこのCSSを適用したグリッドです。

列幅の比率が 1:1:2 のグリッドの例。個別の列幅指定が簡単にできるのが diplay: grid の便利なところ

何よりコードがシンプルだし、列数とかの指定も本当に楽。
あとマージン・パディングも合わせて計算してくれる優れものなんです。

列幅を grid-template-columns で指定する方法

そして display: grid;  の最大の利点がコレ

列幅を均等にしたり、個別の列幅指定がかんたんなこと

指定は grid-template-columns  を使えば、驚くほど簡単でした。

実際にどれだけ柔軟が指定ができるか、色々試したのが次のコードです。

1.repeat関数による列幅指定

まずは repeat関数 を使った列幅の指定

文字通り、列幅をリピートできるから、均等に列を分けたいときに便利です。

▼ 列幅指定のCSSコード例

▼ このCSSが適用されたグリッド

repeat関数による列幅指定したグリッドの例

パーセント指定を使わず repeat(3, 120px)  とか直感的な書き方が可能。

可読性もあがるし、コードも短くできます。

2.minmax関数による列幅指定

次は minmax関数 を使ったグリッド幅指定

▼ 実際に試したCSSコード例

▼ このCSSを適用したグリッド

minmax関数による列幅指定したグリッドの例

スマホとPCで列幅を変えたいとか、そういうとき便利かもしれません。

3.列ごとに条件をかえて幅指定

色々な関数組み合わせ、複雑に列幅指定も可能です。

▼ 実際に試してみたCSSコード例

▼ このCSSを適用したグリッド

repeat関数とかminmax関数を組み合わせて列幅指定したグリッドレイアウトの例

フレックスボックスよりも、直感的&&短く書けるのが利点ですね。

ここまでのまとめ

以上、display: grid は便利だよっていう話でした。

今までフレックスボックスを使うことが多かったので、
グリッドが必要なときはコチラの方も使っていきたいと思います。ではまたバイバイ

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください