Grid Track (グリッドトラック)
グリッドトラックとは、2 本のグリッド線の間の空間のことです。明示的なグリッドでは、 grid-template-columns と grid-template-rows プロパティ、または一括指定の grid または grid-template プロパティを使用して定義します。明示的グリッドで作成したトラックの外側にグリッドアイテムを配置することで、暗黙的グリッドにもトラックが生成されます。
次の画像は、グリッドにおける最初の行トラックを表しています。
明示的グリッドにおけるトラックの大きさ
grid-template-columns および grid-template-rows プロパティを使ってグリッドトラックを定義する際には、任意の長さ単位もしくは、グリッドコンテナー中で利用可能な領域の一部分を表す柔軟な単位 fr が利用できます。
例
次の例は、1 つ目が 200 ピクセルのトラック、2 つ目が 1fr、3 つめが 3fr となる、3 列のトラックから成るグリッドを作っています。グリッドコンテナ中の利用可能な領域のうち 200 ピクセル分を差し引いた残りの領域を 4 分割し、2 つめの列にはその 1 つ分を、3 つめの列には 3 つ分が割り当てられます。
css
.wrapper {
display: grid;
grid-template-columns: 200px 1fr 3fr;
}
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
暗黙的グリッドにおけるトラックの大きさ
暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 grid-auto-rows および grid-auto-columns プロパティでこれらのトラックの大きさを定義することもできます。