display: grid 子を行と列で組む

この要素をグリッドの親要素にして、直下の子を行と列のマス目に置く場合に使います。カード一覧、ヘッダー／本文／サイドの枠、フォームのラベルと入力の段、といった二次元の配置に向きます。

外側の描画です。親要素自身はブロックと同じく、外側の親の幅いっぱいに広がります。行の途中に置く場合は inline-grid です。

内側の描画（影響領域）です。効くのは直下の子までです。列幅は grid-template-columns、行の高さは grid-template-rows、マスの間隔は gap です。子をマスの中で寄せる場合は justify-items / align-items、またはまとめた place-items です。親要素全体を、さらに外側の親の中で寄せる指定ではなく、マスの中の子が動きます。

列の定義例です。1fr 1fr は残り幅を二等分、200px 1fr は左を固定して右を伸ばす、repeat(3, minmax(0, 1fr)) は3列で、中の長い単語が列を押し広げにくい指定です。

flex との使い分けです。一列のナビや、アイコンと文言の一方向揃えは flex で足ります。同じ要素の中で「左は狭く、右は残り全部」「2行目のこのマスだけ結合」など、行と列を同時に決める面は grid です。両方を入れ子にして使うこともあります。

デザインを再現するときの影響です。親に display: grid を付けると、子はグリッドアイテムになります。子に書いていた float や、ブロックの縦積みだけの前提は、その親要素の中では変わります。明示の線名や grid-column が無い子は、空きマスへ自動で流れます。カンプの「このカードだけ2列分」は、その子に grid-column: span 2 などを付けます。