`grid-auto-rows`: レスポンシブなWebデザインに欠かせないCSSプロパティ

grid-auto-rowsプロパティは、CSS Grid Layoutモジュールの一部であり、暗黙的に生成されたグリッド行のサイズを指定します。これは、grid-template-rowsプロパティで明示的に設定されていない行に適用されます。

構文

grid-auto-rows: <track-definition> |minmax(<min>, <max>) repeat(<repeat-count>) [span <span-count>]

要素

<span-count>: パターンを跨ぐ列数。省略すると、1列に跨ります。
<repeat-count>: パターンを繰り返す回数。省略すると、1回繰り返されます。
<max>: 行の最大サイズを指定します。
<min>: 行の最小サイズを指定します。
<track-definition>: 行のサイズを定義する値。以下のいずれかを使用できます。
- length: ピクセル、em、remなどの長さ単位で指定します。
- auto: コンテンツに合わせて自動的にサイズ調整されます。
- fr: 使用可能なスペースを等分します。

例

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px auto; /* 最初の行は50px、残りの行はコンテンツに合わせて自動調整 */
}

この例では、グリッドは自動的に列を生成し、各列の最小幅は200px、最大幅は使用可能なスペース全体になります。最初の行は50pxの高さになり、残りの行はコンテンツに合わせて自動的にサイズ調整されます。

grid-auto-rowsプロパティは、行のサイズのみを指定します。行間のスペースは、grid-gapプロパティで制御できます。
grid-auto-rowsプロパティは、grid-template-rowsプロパティと併用できます。明示的に設定された行は、grid-auto-rowsプロパティよりも優先されます。

コンテンツに合わせて行の高さを自動調整

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: auto;
}

このコードは、以前に説明した例と同じですが、ここでは grid-auto-rows: auto; を使用して、すべての行の高さをコンテンツに合わせて自動的に調整しています。

すべての行を同じ高さにする

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px;
}

このコードは、すべての行の高さを50pxに設定します。コンテンツが50pxよりも大きい場合は、行は自動的に拡張されますが、50pxよりも小さい場合は、コンテンツに合わせて縮小されます。

奇数行と偶数行で異なる高さを設定

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 20px 40px;
}

このコードは、奇数行の高さを20px、偶数行の高さを40pxに設定します。

パターンを繰り返す

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: repeat(3, 100px);
}

このコードは、100pxの高さを3回繰り返すパターンを作成します。つまり、すべての行は100pxの高さになります。

列にまたがる行を作成

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, 1fr) span 2;
}

このコードは、最小高200px、最大高使用可能なスペース全体、2行にまたがる行を作成します。

これらの例はほんの一例であり、grid-auto-rowsプロパティを使用して様々なレイアウトを作成することができます。

grid-template-rows を使用する

最も一般的な代替方法は、grid-template-rows プロパティを使用してすべての行のサイズを明示的に定義することです。

利点:

レスポンシブレイアウトに適している
高度な制御が可能

欠点:

動的なレイアウトには不向き
すべての行のサイズを個別に定義する必要があるため、記述量が多くなる

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 50px 100px auto; /* 行の高さを明示的に定義 */
}

fr 単位を使用する

fr 単位を使用して、行のサイズを親コンテナの空きスペースの比率で定義することもできます。

レスポンシブレイアウトに適している
シンプルで記述量が少ない

すべての行が同じ高さを保たれない場合がある
行の高さがコンテンツの量に依存するため、コントロールが制限される

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr; /* すべての行を親コンテナの空きスペースの等しい比率で分配 */
}

min-content と max-content を使用する

min-content と max-content を使用して、行の高さをコンテンツの最小サイズと最大サイズに制限することができます。

コンテンツのサイズに合わせて行の高さを自動調整できる

すべての行が同じ高さを保たれない場合がある
行の高さがコンテンツの量に依存するため、コントロールが制限される

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(min-content, max-content); /* 行の高さをコンテンツの最小サイズと最大サイズに制限 */
}

JavaScript を使用する

JavaScript を使用して、動的に行のサイズを設定することもできます。

高度な制御が可能
ダイナミックなレイアウトに適している

パフォーマンスへの影響が懸念される
複雑で習得難易度が高い

const grid = document.querySelector('.grid');

grid.style.display = 'grid';
grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';

const rows = [...grid.querySelectorAll('.grid-row')];

rows.forEach((row) => {
  const contentHeight = row.offsetHeight;
  row.style.height = `${contentHeight}px`;
});

最適な代替方法の選択

どの代替方法が最適かは、要件によって異なります。

ダイナミックなレイアウトが必要な場合は、JavaScript を使用する必要があります。
コンテンツのサイズに合わせて行の高さを自動調整したい場合は、min-content と max-content を使用します。
シンプルで記述量が少ないレイアウトが必要な場合は、fr 単位を使用するのが良いでしょう。
高度な制御とレスポンシブレイアウトが必要な場合は、grid-template-rows を使用するのが最善です。

上記以外にも、grid-auto-columns プロパティや grid-gap プロパティなどを組み合わせて、grid-auto-rows の代替機能を実現する方法があります。