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