章末仕上げ ギャラリー完成

この章で手に入れたもの

2 次元でならべる道具がそろいました。

• 親をマス目に変える display: grid
• 列の分けかたを決める grid-template-columns と fr
• 行の最低の高さをそろえる grid-auto-rows と minmax()
• マスどうしのすきまをあける gap
• ライン番号でマスを結合する grid-column

ならべ方を決めるのは親、という考え方は Flexbox と共通でした。違うのは、Grid が行と列を同時にあつかえることです。

二重の余白を消す

前回、.work-card の margin-bottom を 8px まで詰めました。見比べればわかるとおり、カードの下だけまだすきまが広いままです。gap がすでに上下左右のすきまをつくっているので、この margin はもう役目を終えています。行ごと消しましょう。

たとえば読書リストで親の gap が 12px、子の下 margin が 4px なら、次の行までの距離は合わせて 16px になります。親の間隔だけにそろえたいなら、子の下 margin を削除します。演習でも余白の担当を親にまとめましょう。

.reading-list {
  display: grid;
  gap: 12px;
}

.reading-item {
  margin-bottom: 4px;
}

読み返せる形にする

なぜそう書いたのかを伝えるコメントは、ひな形に用意してあります。/* と */ に囲まれた部分は説明で、見た目を変える指定ではありません。今回は書き足さず、3列にした理由と1枚だけ広げた理由を読みましょう。数か月後にファイルを開く自分の手がかりになります。

余白がそろい、カードの高さがそろい、1 枚目だけが大きく見えていたら完成です。次の章では、この形をスマホの画面幅でも崩れないようにしていきます。

1. .work-card から margin-bottom の行を削除する