レイアウト
grid-auto-columns
grid-auto-columns は、grid-template-columns で決めていない列（項目に合わせて自動で足される列）の幅を指定します。
構文
<track-size>+プレビュー
コード
.box {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 40px 1fr;
}コントロール
解説
自動で足される列
grid-auto-flow: column で項目を列に沿って置くときや、項目の位置を書いた列より右に指定したときは、ブラウザが右に列を足します。grid-auto-columns は、その列の幅を決めます。
初期値の grid-auto-flow: row では、足されるのは行です。列を何も決めていなければ自動で 1 列だけが作られ、その幅に grid-auto-columns が使われますが、grid-template-columns で列を決めていれば、項目をその外に置かない限り効きません（行の高さは grid-auto-rows で決めます）。
値の書き方
列の幅を書きます。値は grid-template-columns と同じで、長さ・%・fr・auto・min-content・max-content・minmax() を使えます。初期値は auto で、中身に合わせた幅になります（箱の幅が余れば伸びます）。
スペースで区切って複数の幅を書くと、足される列に順番に使い、最後まで使ったら最初に戻ります。40px 1fr なら、40px の列と 1fr の列が交互に並びます。
横に並ぶ一覧
grid-auto-flow: column と grid-auto-columns: 200px を組み合わせて overflow-x: auto にすると、項目がいくつあっても同じ幅の列で横に並び、はみ出した分を横にスクロールできる一覧になります。
このページのプレビューは、補助の宣言で display: grid と grid-auto-flow: column にして、列は決めずに 4 つの項目を入れています。項目ごとに列が 1 つ足されるので、4 つの列の幅が変わります。
このページで扱わない書き方
fit-content() は、このページのコントロールではまだ扱っていませんが、コードには書けます。repeat() と none は grid-auto-columns には書けません。