gridの良い点は、なんと言ってもそのレイアウトの自由度です。

gridを使えば、誇張でもなんでもなく同じHTMLの階層内にある要素はどのような配置にも自由にできます。

例えば下記をご覧ください↓

いかがでしょうか？

ウインドウを縮める前がPC表示、縮めた後がモバイル表示なのですが、ずいぶんと大胆にレイアウトが変わっていることがわかりますよね。

もし<table>タグでHTMLを記述した際はこのような柔軟なレスポンシブ対応をすることは難しいかと思います。

gridを使うと上記のようにレスポンシブにも柔軟に対応できるテーブルを作ることができます。

それが私がテーブルを作る際にgridを使うのが好きな理由です。

まずは以下のHTMLコードをご覧ください。

grid用のコンテナが２つあり、ひとつ目が「バナナ」、ふたつめが「いちご」となっています。

そしてそれぞれに対して「画像」「品名」「生産地」「値段」「ロット量」という見出しがついていますが、いちごのコンテナではモバイルの際のみこの見出しが必要となります。

PC時には最初のコンテナの見出しだけでいいので、いちごコンテナの見出しは非表示にしておきます。

ですが、、、コードの記述、なんか気持ち悪く感じませんか？

普段HTMLを書き慣れている方ならば下記のように見出しは見出しで、本文は本文で別々にマークアップの階層を分けたいのではないでしょうか。

後述しますが、ひとつめのマークアップの仕方はあえて悪い例にしております。

その理由はあらためて説明するとして、まずはgridの特性として「同じ階層内であれば、いかようにでも配置ができる」ということを原則として覚えておいていただければと思います。

下記のようなイメージです。

まだまだこれらはgridの機能のほんの一部でしかありませんが、ともかくCSSでgridほど自由なレイアウトが組めるタグはないのでgridが苦手！という方もぜひチャレンジしていただきたいです。

gridを使わないのはもったいない！

普段Web業界でコーダーをされている方であればgridを一度も使ったことがないよという方は少ないのではないでしょうか。

ですがそれに反して、gridを苦手と感じている人はとても多い印象です。

そしてgridにおいて最もとっつきにくいと感じるのは、下記のようなgrid-areaの指定方法ではないかと思っています。

.div1 { grid-area: 1 / 1 / 2 / 2; }

.div2 { grid-area: 2 / 3 / 3 / 4; }

その苦手を解消するためのキーワードとして、「行列」という言葉をぜひ覚えておいてください！

gridに限らず、PCで二次元の表（エクセルみたいな表のこと）を表す際は最初に行（row）、次に列（column）という並びになるのが普通です。

gridも例外ではなく、grid-areaの並びは行・列・行・列という順番です。

grid-areaの4つのパラメーターがなんなのか分からなくなった時は、ぜひこっそり「行・列・行・列」とつぶやいてみてください！

その上で下記の図を見てみてください。すごくわかりやすくなってますね（なってるのか？😅）

さて、ここまで来てまた新たなつまづきポイントがあります。

それは

どっちが行でどっちが列かわからなくなった問題

です（笑）

行（row）が横方向、列（column）が縦方向なのですが、日本語の文章をイメージしてしまうと縦書きで一行・二行とカウントするのでなかなかややこしいです。

なので二次元行の行とか列を考える際に、文章の行とごっちゃにしてしまうと混乱するのでやめましょう。

表と文章は別物です。

わからなくなったらぜひ下記をイメージしてください。

邪道な感じがしますが、理系の高校生による古くからの暗記法として由緒ある覚え方なのだそうです（笑）

（その昔、理系の高校数学には「行列」という単元があったのですよ、2012年に消えたそうですが）

さてgridが苦手な人も、ここまででgridに少し慣れていただけたでしょうか？

もしそうであれば幸いです。

その上で、冒頭で話したマークアップの構造に話を戻します。

gridの使い方として、「同じ階層内であれば、いかようにでも配置ができる」ということをお伝えしました。

では逆を言うと、同じ階層上にないコンテンツを自由に配置することは、gridであってもできないのでしょうか？

例えば先に2番目に掲載した下記のようなコードにおいて、見出しと本文を混ぜたレイアウトをすることは不可能でしょうか？

もしできないのであれば、レスポンシブレイアウトのことを考えてできる限り入れ子状にしない、と言うのがgridのベストプラクティスということになるのでしょうか？

答えはNOです。

そういう時のために用意されているCSSの記述があります。

それが

display:contents;

というものです。

display:contents; はこれはこれでなかなか奥が深いので次回の記事に回したいのですが、display:grid; ととても深い関係にあります。

ですのでgridが苦手！という方は、まずは本記事をしっかりと理解した上で次の「display:contents; とは何者か？」を読んでいただけましたら理解が一層深まることと思います。

肝心の「レスポンシブ対応テーブル」をgridにて記述したソースコードの全体は、次回の記事にてあらためて掲載しております。

下部のリンクよりぜひご覧ください。

それでは今回も最後までお読みくださり、誠にありがとうございました！