【コーディング】display: glid; を整理します

閲覧ありがとうございます。

そんな問題解決につながれば嬉しいです。

レスポンシブ対応をする上で「flex」とはちがった特徴を持っている「grid」と使い分けることでコードの量も減るのではないかと考えて、改めて整理することにしました。

※2025.5.15 一部修正しました

display: grid;の基本スタイル

gridのシンプルなスタイルはこちらです。

grid-containerの幅をgrid-itemが埋めてくれます。

See the Pen grid：基本形 by katurasuke Busi (@katurasuke-Busi) on CodePen.

grid-template-columns: repeat(3, 1fr);は（繰り返し回数は３回、余白以外を均等に分割）という意味です。

ちなみに
「grid-template-columns」で行の指定、
「grid-template-rows」で列の指定が可能です。

これだとブロックがくっついていて見にくいので「grid-gap」で隙間を作ります。

See the Pen gapで間隔を取る by katurasuke Busi (@katurasuke-Busi) on CodePen.

因みに
「column-gap」で横の間隔、
「row-gap」で縦の間隔を指定できます。

itemごとのスタイルを変える事もできます。

See the Pen grid:item1だけスタイル変更 by katurasuke Busi (@katurasuke-Busi) on CodePen.

ここでは
item1に対して

grid-column: span 2;
grid-row: span 1;

を追記して、item1に横2fr分、縦1fr分のスペースを取っています。

こんなスタイルもあります。

See the Pen grid ：item2のスタイル変更 by katurasuke Busi (@katurasuke-Busi) on CodePen.

ここはちょっととらえ方を変えて見ていきます。ブロックではなく線で見ます。

横を3つのブロックに分けているので（上の図で）1の左に1本目のライン、右に2本目のライン、3の右に3本目のライン、最後に4の右に4本目のラインがあります。

「grid-column: 2 / 4;」というのは“2本目から4本目まで”という指示になるようです。

同じように「grid-row: 2 / 3;」は縦に“2本目から3本目まで”となるので上の図のように一段下がって２fr分の位置に表示されたんですね。

レスポンシブ対応を考える

画像やカードなどを配置した時、レスポンシブ対応を考えると画面幅が基準になる「fr」ではitemが小さくなりすぎる可能性があります。例えばスマホの画面幅を3等分じゃ1frが小さくなりますよね。

「auto-fill」で自動的に変化させる

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

プロパティの一つ目の値に「auto-fill」を入れると、画像の最小値（ここでは150px）を守りつつ可能な限りフレーム数を並べて表示してくれます。

See the Pen display: grid;をauto-fillを使って自動化変させる by katurasuke Busi (@katurasuke-Busi) on CodePen.

中央下の倍率ボタンで画面幅を相対的に変えてあげると変化がイメージできると思います。

実際にはpaddingなどの調整は必要ですがcrampと併用することでさらにメディアクエリを使うコードが減らせそうですね！

今回はここまでですが、ほかにもgridのセレクタはあるので今後追記していくと思います。

少しでも参考に慣れば幸いです。