Grid Track (グリッドトラック)

明示的グリッドにおけるトラックの大きさ

grid-template-columns および 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>

暗黙的グリッドにおけるトラックの大きさ

暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 grid-auto-rows および grid-auto-columns プロパティでこれらのトラックの大きさを定義することもできます。

関連情報

• グリッドレイアウトの基本概念
• CSS グリッドレイアウト仕様書におけるグリッドトラックの定義
• プロパティリファレンス
  • grid-template-columns
  • grid-template-rows
  • grid
  • grid-template