レイアウト
グリッド
Grid
グリッドとは、画面をあらかじめ均等なマス目（列と行）に区切り、そのマスに合わせて要素を規則的に配置する枠組みです。
定義
グリッドは、画面という空きスペースをあらかじめ均等なマス目に区切っておき、そのマスに合わせて 要素を並べていく配置の枠組みです。いちばん大事な値は、いくつの列（columns）に分けるかと、 マスとマスのあいだの間隔（gap）をどれくらいにするかの2つです。実際に線を引くわけではありませんが、 すべての要素が同じマスのルールに従うので、画面全体に目に見えない秩序が生まれます。方眼紙の上に 絵を描くのに似ていて、いちど枠を決めておけば「どこに置こうか」と毎回悩む必要がなくなり、画面どうしの 一貫性も自然に保たれます。
なぜ重要か
グリッドがないと、要素の位置を毎回カンで決めることになり、ページが増えるほど少しずつズレて まとまりが崩れていきます。共通のマスのルールを決めておけば、見出し・本文・画像・ボタンが同じ列の ラインを共有するので、別々の画面でも同じ製品から生まれたように感じられます。グリッドは レスポンシブ設計の骨格でもあります。画面が狭くなったときに列の数を減らすルールさえ決めておけば、 要素が自然に下へ再配置され、モバイルでも崩れないレイアウトが手に入ります。Webで12列グリッドが 事実上の標準のように使われるのも、この点に理由があります。12は2・3・4・6できれいに割り切れるので、 2段・3段・4段の配置を1つの枠の中ですべてこなせるのです。最初は12列が多すぎるように見えるかも しれませんが、慣れてしまえばほとんどの画面をこの1つの枠で説明でき、かえって判断がシンプルになります。
よくある間違い
- グリッドを決めておきながら、一部の要素だけマスを無視して好きな位置に置いてしまうことです。 1つがルールを外れた瞬間に、見えなかったグリッドが急に目立ちはじめ、せっかく作った秩序が かえってちぐはぐに見えてしまいます。
- マスとマスの間隔（gap）を要素ごとにバラバラに与えてしまうことです。gapが一定でないと、 同じグリッドの上にあってもマスの大きさが違って見え、整列がズレたような印象を与えます。
- デスクトップの列数をそのままモバイルに押し込んでしまうことです。狭い画面で列を減らさないと、 それぞれのマスが窮屈になりすぎて、内容がつぶれて読みにくくなります。
実務のヒント
- まずは列数とgapという2つの値を決め、個々の要素については「その中で何マス分を占めるか」だけを 決めましょう。位置を毎回ゼロから考えなくてよくなり、作業スピードが大きく上がります。
- レスポンシブとは「何列から何列へ減らすか」をあらかじめ決めておく作業です。たとえば広い画面の 3列をモバイルで1列に折りたたむルールが1つあれば、たいていのリストはきれいに再配置されます。
- グリッドは整列や余白と一心同体で動きます。マスが要素の基準線を作り、マスの間隔が余白の スケールとぴったり噛み合ったとき、画面はいちばん整って見えます。
AIに頼む
下に貼り付けるCSS/JSXで、margin・absolute・バラバラなwidthで勘で配置された要素を、12カラムグリッドの上に載せ直して。grid-template-columns: repeat(12, 1fr)にして、gapは一つの値に統一して、そのgapは余白8pxスケールの倍数から選んで。各要素は位置を新しく考え直さずに『何カラム分を占めるか(span N)』だけ決めて、全部が同じカラム線を共有するようにして。マスを無視して任意の位置に浮いていた要素は一番近いマスに揃えて、変更後のコードと各要素のspanを表にまとめて。
このサービスは[サービスの性格 — 例: カード一覧中心のコマース]なんだ。これに合う、レスポンシブな12カラムグリッドシステムを設計して。12は2・3・4・6できれいに割り切れるから、コンテンツに合う段組み(2段・3段・4段)を理由と一緒に提案して、デスクトップで何カラム → タブレット → モバイル1カラムへと畳まれるのか、ブレークポイントごとのルールを決めて。gapは一つの値に統一しつつ、余白スケール(8の倍数)ときっちり合うように取って、全体をgrid-template-columns・gapのCSS変数セットにして。
下に貼り付けるコードが、狭い画面でもデスクトップのカラム数をそのまま維持していて、マスが狭くなりすぎて中身がつぶれてる。画面が狭くなったときにカラムを減らすレスポンシブなルールを入れて — 例えば3カラムをタブレットで2カラム、モバイルで1カラムに畳んで。このときgapはそのまま維持して、マスのサイズが違って見えたり整列がずれた印象を与えないようにして。media queryとauto-fit/minmaxのうち、このレイアウトに合う方を理由と一緒に選んで適用して、ブレークポイントごとに最終的に何カラムになるのかを表にまとめて。