どうもお久しぶりです。maruquiです。

今回はGrid layoutについてまとめます。

横並びはもはやFlexboxを使うのが主流になっているこの頃ですが、Grid layoutでのコーディングも目立ってきました。

前職にいたときからGrid layoutは興味があったのですが、職場では全く使う機会がないまま終わっていました。

現職でいきなりGrid layoutを使う機会があり、少し戸惑いながらも勧めていくわたし。上司にコツを聞いて、ある程度習得することができました。

Flexboxでは手の届かないレイアウトを実装するときに大変便利なので、Grid layoutをイマイチ理解できない方や、自分への忘備録のために記事として残しておきます。

ただ、記事が長くなると思うので、分割してご紹介していきます。今回は、実務で実装したレイアウトに似せたものをご紹介します。

Grid Layoutが活躍したレイアウト

結論から申し上げますと、PCでは左に画像、右にタイトル＋テキスト、スマホでは上からタイトル、画像、テキストの順番になるようなレイアウトで大活躍しました。

前職ではFlexboxを使って、PCとスマホでdisplay: none;で切り分ける実装をしていました。

Flexboxでの実装をコードにするとこんな感じです。

See the Pen Untitled by Takao Kawai (@codeQuina) on CodePen.

最初はスマホ表示になっていますが、0.25xのボタンをクリックすることでPCも確認できます。

また、現職にてgap: Xpx Ypx;の存在を知ったので、gapを使う前は画像にmargin-rightで余白を指定していました。

もしFlexboxでもより洗練されたコードを記述できる方法があれば、是非知りたいです。

現状の私が知るFlexboxの実装では、どう考えてもSEO的に良いコードとはいいにくいですから。
コンテンツが重複しちゃってますし…。笑

SEO的に見て良いコードとは言いにくいですが、保守的なコードとも言いがたいです。数個くらいなら修正が発生しても直しやすいですが、大量にあると鬱陶しいし、何より他の人が修正するときに何を思われるかわかりません。笑

ということで、Grid Layoutを使ったレイアウトも見てみましょう。

See the Pen Grid Layout by Takao Kawai (@codeQuina) on CodePen.

HTMLとSCSS(CSS)の構造がすっきりして見やすくなっています。重複コンテンツもないため、SEO的にも優しい構造だといえます。

あとは慣れてしまえばコーダーにとっても優しい…。

同じような実装ができてしまうなら、楽な方がいいのは明白です。では、Grid Layoutはどう理解して実装したらよいのか…。

それについては、次回Gridについて記事にしたときに説明していきます。

Grid Layoutは怖くない！

ということで、Grid Layoutを理解したら、こんなときに楽だよ〜というのをご紹介させていただきました。

先ほどご紹介したレイアウトの場合、私の知る限りFlexboxだと超めんどくさいコードの書き方をしなければなりません。

しかしGrid Layoutについて理解を深めたとき、私はかなり視界が広がりました。

Flexboxについて理解ができるようになった方は、ぜひGrid Layoutについても理解していただきたいです。

近々自分の忘備録もかねて、Grid Layoutについてある程度詳しくまとめていきます。

というわけで、今日はこの辺にしておきます。最後までご覧いただきまして、ありがとうございました！

Grid Layoutの基本概念 - CSS MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout