行の定義と間隔

行は自動でつくられる

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

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

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

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

.news-list {
  grid-auto-rows: minmax(80px, auto);
}

これはニュース一覧の行を最低 80px にし、中身が多いときは必要なだけ伸ばす例です。minmax() の最初の引数が最低の高さ、次の引数が最大の高さです。最大を auto にすると、中身に合わせて伸ばせます。演習では最低の高さを指定された数値に変えます。

gap ですきまをあける

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

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

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