• Home
  • Web制作
  • frってなに？CSS Gridで柔軟なレイアウトを実現しよう！

frってなに？CSS Gridで柔軟なレイアウトを実現しよう！

schedule update
Tags: CSS

frってなに？CSS Gridで柔軟なレイアウトを実現しよう！

Webページのレイアウトを作成する際、皆さんはどのように要素を配置していますか？従来のfloatやpositionプロパティによる配置に限界を感じている方もいるのではないでしょうか。

そんな悩みを解決するのが、CSS Grid Layout Module（以下、CSS Grid）です。CSS Gridは、従来の手法よりも直感的かつ柔軟に要素を配置できる、非常に強力なレイアウトモジュールです。

本記事では、CSS Gridの中でも特に重要な要素である「fr」について、基本的な使い方から応用的な活用例までご紹介します。frを理解し、CSS Gridを使いこなすことで、より自由度の高いWebページレイアウトを実現できるようになります。

あわせて読みたい
ウェブページの構成が思いのままに！display: grid を用いた柔軟な配置手法を基礎から学ぶ

frとは？

frは、CSS Gridで使用できる長さの単位の一つで、「fraction（フラクション）」の略称です。グリッドコンテナの空きスペースに対する比率を表し、柔軟なレイアウトを実現する上で非常に重要な役割を果たします。

例えば、grid-template-columns: 1fr 1fr;と指定すると、グリッドコンテナの横幅が2等分され、それぞれのグリッドトラックの幅が1frとして定義されます。このとき、グリッドコンテナの横幅が変化しても、常に2等分の比率が維持されます。

frは、pxや%などの固定単位とは異なり、グリッドコンテナの空きスペースに応じて自動的にサイズ調整されるため、レスポンシブデザインにも最適です。

frの基本的な使い方

frの基本的な使い方としては、grid-template-columnsプロパティやgrid-template-rowsプロパティでグリッドトラックのサイズを指定する際に使用します。

例えば、以下のように記述すると、3カラムレイアウトで、左側のカラムの幅が2fr、中央のカラムの幅が1fr、右側のカラムの幅が1frとして定義されます。

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

この場合、グリッドコンテナの横幅に対して、左側のカラムは2/4、中央と右側のカラムはそれぞれ1/4の幅を占めることになります。

frを活用した応用例

frは、基本的なグリッドレイアウト以外にも、以下のような応用例があります。

  • 余白の調整: frと固定単位を組み合わせることで、グリッドトラック間に余白を設けることができます。
  • アスペクト比の維持: aspect-ratioプロパティと組み合わせることで、グリッドアイテムのアスペクト比を維持したままサイズ調整を行うことができます。
  • 複雑なレイアウトの実現: grid-auto-rowsプロパティやgrid-auto-columnsプロパティと組み合わせることで、より複雑なレイアウトを実現することができます。

まとめ

今回は、CSS Gridで使用できるfrについて解説しました。frを活用することで、グリッドコンテナの空きスペースに応じて柔軟にレイアウトを調整することができます。

frを使いこなせるようになれば、CSS Gridの可能性はさらに広がります。ぜひ本記事を参考に、frを活用した柔軟なWebページレイアウトに挑戦してみてください。

関連記事