grid-templateプロパティ

プロパティgrid-templateは、 グリッド内の要素が占める行と列の数と幅を指定し、 プロパティgrid-template-rows およびgrid-template-columnsの 一括指定形式です。 要素が配置される行と列はスラッシュで区切って指定します。 プロパティgrid-templateは親要素に設定され、 子要素の配置を決定します。 プロパティ値では、行や列の幅を任意の 寸法単位で指定します。

プロパティ値にピクセル値を指定した場合、 要素のサイズは正確にその値に従います。 キーワードautoを指定すると、列と行は 利用可能なすべてのスペースを埋めます。 単位fr（フラクション）を使用すると、 すべてのスペースが均等な割合に分割されます。 frの利点は、異なるコンテナや画面解像度に 適応できることです。これは、 frがピクセル単位の正確なサイズに依存せず、 指定された数のフラクションに分割するだけだからです。

構文

cssセレクタ {
  grid-template: 行の幅と数 / 列の幅と数;
}

例

プロパティgrid-templateを使用して表を作成しましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

次に、2行目と3行目の幅を同じにし、 各列の幅を異なる値に設定してみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

前の例の表で、一番上の行の幅を2フラクションに、 最初の列の幅を0.5フラクションに変更してみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

関連項目