レイアウト
grid-area
grid-area は、グリッドの項目に書いて、その項目を置く行と列をまとめて指定します。grid-row-start・grid-column-start・grid-row-end・grid-column-end の 4 つを書くショートハンドです。
構文
<grid-line> [ / <grid-line> ]{0,3}プレビュー
コード
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box > :nth-child(2) {
grid-area: 1 / 2 / 3 / 4;
}コントロール
解説
値の書き方
4 本の線を / で区切って、行の始まり・列の始まり・行の終わり・列の終わりの順に書きます（grid-area: 1 / 2 / 3 / 4）。横書きなら上・左・下・右の順で、margin などの上・右・下・左とは回る向きが逆です。それぞれの線は grid-row・grid-column と同じく、auto・線の番号・span 2 のどれかで書きます。
後ろの線は省けます。線の番号や span で書いたときは、省いた線は auto になるので、grid-area: 2 / 3 は 2 行目の 3 列目の 1 マスに置きます。span 2 / span 2 のように span だけを書くと、置き場所は自動のまま、縦横 2 マスずつの項目になります。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: repeat(3, 1fr) にして、3 列のマスに 4 つの項目を入れ、2 番目の項目だけに grid-area を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。行は書いていないので、項目の置き方に合わせて自動で作られます。行と列を決めた 2 の項目が先に置かれ、ほかの項目はそのあと空いているマスに HTML の順で入ります。
名前で置く
箱の grid-template-areas でマスの範囲に名前を付けておくと、grid-area: header のように名前 1 つでその範囲に置けます。名前を 1 つだけ書くと、省いた 3 本の線にも同じ名前が入り、header-start と header-end の線（範囲の端）を指すことになるからです。名前で置く書き方は、このページのコントロールではまだ扱っていませんが、コードには書けます。
線の番号の数え方
負の番号は、grid-template-columns や grid-template-rows で書いた列や行（明示したグリッド）の終わりから数えます。このページのプレビューでは列は 3 列書いてあるので 1 / 1 / 2 / -1 で 1 行目を端から端まで使えますが、行は書いていないので、行の終わりを -1 にしても 1 番の線と同じになります。