We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

グリッドトラックは二つの グリッドライン の間の領域のことであり、明示的グリッド (explicit grid ) に於いて grid-template-columnsgrid-template-rows プロパティまたはそれらの短縮記法である gridgrid-template プロパティを使って定義されます。明示的グリッドで作成されるトラックの外にグリッドアイテムを配置すると暗黙的グリッド (implicit grid) にもトラックは作成されます。

次の画像ではグリッドにおける最初の行トラックを表しています。

Diagram showing a grid track.

明示的グリッドに於けるトラックサイズ

grid-template-columns および grid-template-rows プロパティを使ってグリッドトラックを定義する際には、任意の長さ単位もしくは、グリッドコンテナ中で利用可能な領域の一部分を表す柔軟な単位 fr を利用できます。次の例は、1 つ目が 200 ピクセルのトラック、2 つ目が 1fr、3 つめが 3fr となる、3 列のトラックから成るグリッドを作っています。グリッドコンテナ中の利用可能な領域のうち 200 ピクセル分を差し引いた残りの領域を 4 分割し、2 つめの列にはその 1 つ分を、3 つめの列には 3 つ分が割り当てられます。

.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>

暗黙的グリッドに於けるトラックサイズ

暗黙的グリッドに於けるトラックはデフォルトでは自動的にサイズが決定されますが、grid-auto-rows および grid-auto-columns プロパティでこれらのトラックのサイズも定義できます。

追加情報

プロパティリファレンス

より詳しく

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: dynamis
最終更新者: dynamis,