要素の配置

マス目の境目には番号がついている

Grid では、列と行の境目の線に番号がふられています。これをグリッドラインと呼びます。3 列のグリッドなら、縦のラインは左端が 1 番、次が 2 番、その次が 3 番、右端が 4 番です。マスの数より 1 つ多い、と覚えると間違えません。

grid-column で横に広げる

子要素に grid-column を書くと、どのラインからどのラインまでを使うかを指定できます。

これは 1 番のラインから 3 番のラインまでという意味で、結果として 2 マスぶんの幅になります。grid-column: span 2 と書いても幅は同じですが、置く位置まで決めたいときはライン番号のほうが確実です。

縦方向は grid-row です。書きかたはまったく同じで、grid-row: 1 / 3 なら 2 行ぶんの高さになります。この 2 つを組み合わせれば、雑誌のように大小のまざったレイアウトも組めます。

推し作品を大きく見せる

作品が全部同じ大きさでならんでいると、どれが自信作なのか伝わりません。1 枚目だけ 2 マス使えば、自然とそこに目が行きます。

いちばん最初のカードを選ぶには :first-child を使います。親の中でいちばん最初の子要素を選ぶセレクタです。押し出された 2 枚目以降は、あいているマスへブラウザが順番に流し込んでくれます。

1. .work-card:first-child というセレクタを新しく追加する
2. grid-column を使い、1 枚目のカードだけ 2 マスぶんの幅にする