行テンプレートの設定
グリッドアイテムの高さ
行テンプレートを設定しない場合、グリッドアイテムの高さは自動で、その行で一番高いアイテムに揃う。
grid-template-columns: 1fr 1fr 1fr 1fr;
One
列: 1fr
行: 自動(コンテンツが収まる高さ)
Two
列: 1fr
行: 自動
1行目で一番高いのはグリッドアイテムTwo
Three
列: 1fr
行: 自動
Four
列: 1fr
行: 自動
Five
列: 1fr
行: 自動
2行目で一番高いのはグリッドアイテムFive。グリッドアイテムFiveはグリッドアイテムTwoより高いので、1行目より2行目のほうが高さが大きくなる。
行ごとに高さを設定する
行ごとに高さを設定する場合は grid-template-rows を使う。
3列3行(グリッドアイテムは9個)、列は均等、1行目最低10px、2行目最低300px、3行目最低150pxに設定
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: minmax(10px, auto) minmax(300px, auto) minmax(150px, auto);
One
列: 1fr
行: 10px またはコンテンツが収まる高さ
Two
Three
Four
列: 1fr
行: 300px またはコンテンツが収まる高さ
Five
Six
Seven
列: 1fr
行: 150px またはコンテンツが収まる高さ
Eight
Nine
すべての行に同じテンプレートを設定する
すべての行に同じテンプレートを設定するときは、grid-auto-rows() を使う。
すべての行の高さを最低130pxに設定
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(130px, auto);
One
列: 1fr
行: 130px またはコンテンツが収まる高さ
Two
Three
Four
列: 1fr
行: 130px またはコンテンツが収まる高さ
Five
Six
Seven
列: 1fr
行: 130px またはコンテンツが収まる高さ