CSS プロパティ grid-rows

CSS grid-row 属性を徹底解説：グリッドアイテムの行方向の制御

CSS grid-row 属性を徹底解説：グリッドアイテムの行方向の制御

CSS の grid-row 属性は、グリッドレイアウトにおいて、グリッドアイテムがグリッドコンテナのどの行からどの行までを占めるかを制御するために使用します。 この属性をマスターすることで、より柔軟で複雑なグリッドレイアウトを実現することができます。

1. grid-row 属性の基本

1.1. grid-row とは？

grid-row 属性は、グリッドアイテムがグリッドコンテナ内で垂直方向（行方向）にどの位置に配置され、いくつの行を占めるかを指定するために使用します。 grid-row-start と grid-row-end のショートハンドプロパティであり、これらのプロパティを個別に指定する代わりに、一度に指定することができます。

1.2. 書き方と値

grid-row 属性には、以下の3つの書き方があります。

  • <grid-line>
  • <grid-line> / <grid-line>
  • <grid-line> / span <row-size>

それぞれの書き方について、詳しく見ていきましょう。

1.2.1. <grid-line>

この書き方では、グリッドアイテムの開始行と終了行が同じになります。つまり、グリッドアイテムは指定した行にのみ配置されます。 <grid-line> には、グリッド線の番号または名前を指定することができます。 


<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>


.container {
  display: grid;
  grid-template-rows: 100px 100px;
}

.item:nth-child(1) {
  grid-row: 2; /* 2行目に配置 */
}

1.2.2. <grid-line> / <grid-line>

この書き方では、グリッドアイテムの開始行と終了行をそれぞれ指定することができます。 <grid-line> には、グリッド線の番号または名前を指定することができます。 


<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>


.container {
  display: grid;
  grid-template-rows: 100px 100px;
}

.item:nth-child(1) {
  grid-row: 1 / 3; /* 1行目から3行目までを占める */
}

1.2.3. <grid-line> / span <row-size>

この書き方では、グリッドアイテムの開始行と、開始行からいくつの行を占めるかを指定することができます。 <grid-line> には、グリッド線の番号または名前を指定することができます。 <row-size> には、占める行数を数値で指定します。 


<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>


.container {
  display: grid;
  grid-template-rows: 100px 100px;
}

.item:nth-child(1) {
  grid-row: 2 / span 2; /* 2行目から2行分を占める */
}

2. grid-row を使ったグリッドアイテムの配置

2.1. 複数行にまたがるアイテム

grid-row 属性を使うと、グリッドアイテムを複数行にまたがって配置することができます。 上記の <grid-line> / <grid-line> や <grid-line> / span <row-size> の書き方を使用することで、アイテムが占める行数を指定することができます。

2.2. 開始行と終了行の指定

grid-row 属性を使用すると、グリッドアイテムの開始行と終了行を明示的に指定することができます。 これは、グリッドレイアウトをより細かく制御したい場合に役立ちます。

2.3. 負のグリッド線

グリッド線は、グリッドコンテナの左上から右下に向かって自動的に番号が割り当てられますが、負の値を使うことで、右下から左上に向かって番号を付けることもできます。 負のグリッド線を使用すると、グリッドレイアウトを柔軟に調整することができます。

3. grid-row と他のグリッドプロパティとの組み合わせ

3.1. grid-template-rows

grid-template-rows プロパティは、グリッドコンテナの行のサイズを定義します。 grid-row 属性と組み合わせて使用することで、グリッドアイテムを行にどのように配置するかをより細かく制御することができます。

3.2. grid-auto-rows

grid-auto-rows プロパティは、明示的にサイズが指定されていない行のサイズを定義します。 grid-row 属性と組み合わせて使用することで、グリッドアイテムを柔軟に配置することができます。

4. ブラウザ対応状況

grid-row 属性は、主要なブラウザの最新バージョンで広くサポートされています。 ただし、古いブラウザではサポートされていない場合があるので、caniuse.comなどのウェブサイトで最新のブラウザ対応状況を確認することをお勧めします。

5. まとめ

CSS の grid-row 属性は、グリッドレイアウトにおいてグリッドアイテムの行方向の位置とサイズを制御するための重要なプロパティです。 この属性をマスターすることで、より柔軟で複雑なグリッドレイアウトを実現することができます。

よくある質問

  1. Q: grid-row と grid-column の違いは何ですか？
    A: grid-row はグリッドアイテムの行方向の位置を制御し、grid-column は列方向の位置を制御します。
  2. Q: grid-row を使わずにグリッドアイテムを複数行にまたがらせることはできますか？
    A: はい、grid-row-start と grid-row-end を個別に使用することで、grid-row を使わずにグリッドアイテムを複数行にまたがらせることができます。
  3. Q: grid-row 属性はレスポンシブデザインに対応していますか？
    A: はい、メディアクエリを使用して、画面サイズに応じて grid-row 属性の値を変更することができます。