Gridをはじめよう
1 次元の Flexbox、2 次元の Grid
第 1 章で使った Flexbox は、横一列か縦一列か、どちらか 1 本の線にならべるしくみでした。ナビのメニューのように、ならべたいものが一列の場面にはぴったりです。
いっぽう作品ギャラリーのように、行と列の両方をきれいにそろえたい場面では Flexbox は少し窮屈です。そこで登場するのが Grid です。Grid は親要素をマス目に切り、その中に子要素を流し込みます。行と列を同時に決められるので、2 次元のならべ方はこちらのほうが素直に書けます。
マス目のつくりかた
親要素に display: grid と書くと、その要素はグリッドコンテナになります。ただしこれだけでは縦 1 列のままです。列をいくつに分けるかを grid-template-columns で伝えます。
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}fr は Grid だけで使える単位で、余っている幅を何個ぶん取るかを表します。1fr 1fr 1fr なら幅を 3 等分するという意味です。同じ値がならぶときは repeat(3, 1fr) とまとめて書けます。
作品セクションを 3 列にする
作品カードを囲んでいるのは .work-list です。ここにグリッドを指定すれば、中の .work-card が自動で 3 列にならびます。子要素側には何も書きません。ならべ方を決めるのは親の仕事、という考え方は Flexbox とまったく同じです。
課題
.work-listにdisplayのgridを指定する.work-listにgrid-template-columnsを書き、幅を 3 等分した列をつくる