行の定義と間隔

行は自動でつくられる

前回は列だけを決めました。行のほうは、子要素の数と中身に合わせてブラウザが勝手につくってくれます。これを暗黙の行と呼びます。

便利なしくみですが、そのままだと文章量の違いがそのまま高さの違いになります。説明が短いカードだけ背が低くなり、ならびがそろって見えません。

grid-auto-rows で最低の高さを決める

自動でつくられる行の高さは grid-auto-rows で指定できます。120px のように固定してしまうと長い文章がはみ出すので、minmax() を使うのが定番です。

これは、最低でも 120px は確保して、中身が多いときは必要なだけ伸びてよい、という意味になります。短いカードも 120px までは背が伸びるので、高さがそろって見えます。

gap ですきまをあける

マス目どうしの間隔は gap であけます。Flexbox で使った gap と同じもので、Grid では行と列の両方にまとめて効きます。gap: 16px 24px のように 2 つ書けば、行の間隔と列の間隔を別々に決められます。

margin と違って、いちばん外側にはすきまがつきません。カードの外側に余分な余白が出ないので、白いカードの中にぴったりおさまります。ここでは行も列も 16px にそろえましょう。

1. .work-list に grid-auto-rows を足し、行の高さを最低 120px にする
2. .work-list に gap を足して、マス目のすきまを 16px にする