レイアウト
grid-column
grid-column は、グリッドの項目に書いて、その項目をどの列に置くか、何列にまたがらせるかを指定します。grid-column-start と grid-column-end をまとめて書くショートハンドです。
構文
<grid-line> [ / <grid-line> ]?プレビュー
コード
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box > :nth-child(2) {
grid-column: span 2;
}コントロール
解説
値の書き方
始まりの線と終わりの線を / で区切って書きます（grid-column: 1 / 3）。線は列と列の境目のことで、3 列のグリッドには左から 1〜4 番の線があります。1 / 3 は 1 番の線から 3 番の線まで、つまり 1 列目と 2 列目にまたがります。それぞれの線は次のどれかで書きます。
auto：初期値です。項目は空いているマスに順に置かれ、1 列分の幅になります。- 線の番号：
3なら 3 番の線です。負の値は右（終わり）から数え、-1は最後の線なので、1 / -1で端から端まで広げられます。0 番の線はありません。 span 2：何列にまたがるかを書きます。始まりの線を書かずにspan 2だけを書くと、置き場所は自動のまま、2 列分の幅の項目になります。
始まりに線の番号を書いて終わりの線を省くと、終わりは auto になり、1 列分の幅になります。grid-column: 3 は 3 列目の 1 マスに置きます。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: repeat(3, 1fr) にして、3 列のマスに 4 つの項目を入れ、2 番目の項目だけに grid-column を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。縁取りした 2 の項目が広がったり動いたりすると、後ろの 3・4 の項目の置き場所も変わります。
前のマスが空くことがある
1 / -1 や 3 のように列を決めた項目を置くと、その前のマスが空いたままになることがあります。項目は初期値では前に戻らずに順に置かれるからです（grid-auto-flow: row）。箱に grid-auto-flow: row dense を書くと、後ろの項目が前の空いたマスを埋めます。
線の番号の数え方
負の番号は、grid-template-columns で書いた列（明示したグリッド）の右端から数えます。項目が多くて自動で足された列には届かないので、列を書いていない箱では 1 / -1 で端から端まで広げられません。反対に、書いた列より大きい番号（3 列のグリッドで 5 など）を書くと、列が自動で足されます。足された列の幅は grid-auto-columns で決まります。
このページで扱わない書き方
grid-template-columns: [full-start] 1fr [full-end] のように付けた線の名前（grid-column: full など）は、このページのコントロールではまだ扱っていませんが、コードには書けます。行の置き場所は grid-row で決め、grid-area で行と列をまとめて書けます。