行テンプレートの設定

グリッドアイテムの高さ

行テンプレートを設定しない場合、グリッドアイテムの高さは自動で、その行で一番高いアイテムに揃う。

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 またはコンテンツが収まる高さ