章末仕上げ ギャラリー完成
この章で手に入れたもの
2 次元でならべる道具がそろいました。
- 親をマス目に変える
display: grid - 列の分けかたを決める
grid-template-columnsとfr - 行の最低の高さをそろえる
grid-auto-rowsとminmax() - マスどうしのすきまをあける
gap - ライン番号でマスを結合する
grid-column
ならべ方を決めるのは親、という考え方は Flexbox と共通でした。違うのは、Grid が行と列を同時にあつかえることです。
二重の余白を消す
前回、.work-card の margin-bottom を 8px まで詰めました。見比べればわかるとおり、カードの下だけまだすきまが広いままです。gap がすでに上下左右のすきまをつくっているので、この margin はもう役目を終えています。行ごと消しましょう。
.work-card {
padding: 16px;
border: 1px solid #e5e1d8;
border-radius: 10px;
transition: transform 0.2s, box-shadow 0.2s;
}読み返せる形にする
最後に、なぜそう書いたのかをコメントで残します。.work-list の上には 3 列にした意図を、.work-card:first-child の上には 1 枚だけ広げた意図を書いておきます。数か月後にこのファイルを開くのは自分自身です。
余白がそろい、カードの高さがそろい、1 枚目だけが大きく見えていたら完成です。次の章では、この形をスマホの画面幅でも崩れないようにしていきます。
課題
.work-cardからmargin-bottomの行を削除する.work-listの上に、3 列にした意図を書いたコメントを添える.work-card:first-childの上に、1 枚だけ広げた意図を書いたコメントを添える