⌘K

grid-template-rowsプロパティ

プロパティ grid-template-rows は、 グリッド内の要素が占める行の数と幅を 指定します。 プロパティの値には、任意の サイズ単位で 行の幅を指定します。 このプロパティは親要素に指定され、 子要素の行の幅を決定します。

プロパティ値にピクセル単位を指定すると、 行のサイズはその値に正確に従います。 キーワード auto を指定すると、 行は利用可能なスペースをすべて埋めます。 単位 fr (fraction) を使用すると、 スペース全体が均等な部分に分割されます。 fr の利点は、異なるコンテナや画面解像度に 適応できることです。なぜなら fr は、 ピクセル単位の正確なサイズに縛られず、 指定された数の分数に単純に分割するからです。

構文

cssセレクタ {
  grid-template-rows: 行の幅;
}

例

グリッド内の要素の行の幅を設定してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

1番目と3番目の行をピクセル単位で固定幅に設定し、 2番目の行は利用可能なスペースを自動的に埋めるようにしてみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

次に、プロパティ grid-template-rows を使用して、 1番目と2番目の行がコンテナの1部分を占め、 3番目の行が3部分を占めるようにしてみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

単位 fr で指定された値は、小数を取ることができます。 前の例を変更して、2番目と3番目の行の幅を小数で指定してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

プロパティ grid-template-rows に 関数 repeat() を指定して、 3つの行すべてが同じ幅を持つようにコンテナに指示してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

前の例を変更して、同じ3つの行に加えて、 コンテナの2フラクションを占める4番目の行を追加してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

最初の2つの行をコンテナの1フラクションに設定し、 最後の2つの行を2フラクションに設定してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

次に、関数 repeat() で指定された値と、 自由な単位 fr を組み合わせて行の幅を設定してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

関数 repeat() には、値 auto-fill を指定することもできます。 これにより、必要な幅の同じ行でコンテナが埋められます： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

auto-fill と一緒に関数 minmax を指定すると非常に便利です。 この関数は、行の幅の最小値から最大値までの範囲を指定します。 コンテナの幅がすべての行を収容できない場合、 一部の行は新しい行に移動します。その際、行内の行は均等に分配されます。 前の例を変更して、関数 minmax を指定してみましょう： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

次に、プロパティ auto-fit を指定してみましょう。 これは auto-fill との違いで、 利用可能なコンテナ幅に合わせて行の数を調整し、 行を拡大または縮小します： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

fr と一緒に、値 % を使用することもできます。 これも行がコンテナのどの部分を占めるかを定義します。 この場合、最初に % での行のサイズが計算され、 残りの空きスペースがフラクションに分割されます： 

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

プロパティ grid-template-columns と grid-template-rows を一緒に使用してみましょう： 

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-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

プロパティ grid-template-columns と grid-template-rows を使用して、 3つの行に配置された9つのセルからなるテーブルを作成してみましょう。 ただし、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-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#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-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

関連項目

  • プロパティ grid-template-columns,
    グリッド内の列の数と幅を指定します
  • プロパティ grid-auto-rows,
    暗黙的グリッド内の行の数と幅を指定します
Backプロパティ grid-auto-columnsNextgrid-auto-rows プロパティ