レイアウト

grid-auto-rows

grid-auto-rows は、grid-template-rows で決めていない行（項目に合わせて自動で足される行）の高さを指定します。

構文

<track-size>+

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px 1fr;
}

grid-auto-rows40px 1fr

トラック 1

minmax()

トラック 2

minmax()

1234

グリッドの項目が grid-template-rows で書いた行に入りきらないと、ブラウザは下に行を足します。行を書いていなければ、すべての行が自動で足された行です。grid-auto-rows は、その行の高さを決めます。

一覧のように項目の数が決まっていないときは、列だけを grid-template-columns で決めて、行の高さは grid-auto-rows に任せるのがよくある書き方です。

行の高さを書きます。値は grid-template-rows と同じで、長さ・%・fr・auto・min-content・max-content・minmax() を使えます。初期値は auto で、中身に合わせた高さになります（箱の高さが余れば伸びます）。

スペースで区切って複数の高さを書くと、自動で足される行に順番に使い、最後まで使ったら最初に戻ります。40px 1fr なら、40px の行と 1fr の行が交互に並びます。

このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 1fr 1fr にして、行は決めずに 4 つの項目を入れています。項目が 2 行に分かれるので、足された 2 つの行の高さが変わります。

fit-content() は、このページのコントロールではまだ扱っていませんが、コードには書けます。repeat() と none は grid-auto-rows には書けません。