• Home
  • Web制作
  • グリッドレイアウトを使いこなそう！ 自動配置を使いこなす auto-fill と auto-fit

グリッドレイアウトを使いこなそう！ 自動配置を使いこなす auto-fill と auto-fit

schedule
Tags: CSS

はじめに：グリッドレイアウトと自動配置

Webサイトのレイアウトは、見やすさ、使いやすさを大きく左右する要素の一つです。 そのレイアウトを、より柔軟かつ効率的に行えるのがCSSのグリッドレイアウトです。 グリッドレイアウトは、ページを格子状に分割し、その中に要素を配置していく手法です。

グリッドレイアウトで特に便利なのが 自動配置 の機能です。 grid-template-columns や grid-template-rows に auto-fill や auto-fit を指定することで、ブラウザの幅やコンテンツ量に応じて、グリッドトラックの数を自動で調整できます。

本記事では、この auto-fill と auto-fit の違いを分かりやすく解説し、具体的な使用例も交えながら、それぞれの機能を最大限に活かす方法をご紹介します。

あわせて読みたい
【CSSグリッドレイアウト徹底解説】初心者でも実装できる！自由自在なWebデザインを実現

auto-fill: 余白もトラックとして扱う

auto-fill は、利用可能なスペースを最大限に活用して、指定されたサイズのグリッドトラックを 可能な限り多く 配置します。

特徴は、スペースが余った場合でも、 空のグリッドトラック を作成して、指定したトラック数を維持することです。 つまり、余白部分もトラックとして認識し、レイアウトに組み込みます。

auto-fill の使用例

例えば、以下のようなコードの場合を考えてみましょう。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

このコードでは、grid-template-columns プロパティに repeat(auto-fill, minmax(200px, 1fr)) と指定しています。 これは、「最小幅200px、最大幅は自動調整 (1fr) のグリッドトラックを、可能な限り多く配置する」という意味になります。

ブラウザの幅が広い場合は、多くのグリッドトラックが配置され、コンテンツが複数列に並びます。 一方、ブラウザの幅が狭くなった場合は、グリッドトラックの数が減り、最終的に1列になるまで調整されます。 しかし、スペースが余っている場合は、空のグリッドトラックが作成され、指定したトラック数が維持されます。

auto-fit: 余白は縮小して調整

auto-fit も、auto-fill と同様に、利用可能なスペースにグリッドトラックを自動で配置します。 異なる点は、auto-fit はスペースが余った場合、 空のグリッドトラックを作成せずに、残りのグリッドトラックの幅を広げて調整 する点です。

auto-fit の使用例

先ほどの auto-fill のコードとほぼ同じですが、auto-fill を auto-fit に変更してみましょう。

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

ブラウザの幅が広い場合は、auto-fill と同様に、多くのグリッドトラックが配置されます。 しかし、ブラウザの幅が狭くなり、スペースが余り始めた場合、auto-fit は空のトラックを作成する代わりに、 既存のグリッドトラックの幅を広げて スペースを埋めます。

auto-fill と auto-fit の使い分け

auto-fill と auto-fit は、どちらもグリッドレイアウトの柔軟性を高める便利な機能ですが、その動作の違いから、それぞれ適した使い方が異なります。

  • auto-fill : 常に一定の列数を維持したい場合や、空のスペースもデザインの一部として利用したい場合に有効です。例えば、画像ギャラリーなどで、常に一定数の画像を1行に表示したい場合などに適しています。
  • auto-fit : コンテンツに合わせて柔軟にレイアウトを調整したい場合に有効です。例えば、カード型のレイアウトで、ブラウザ幅に合わせてカードのサイズを調整したい場合などに適しています。

まとめ

今回は、グリッドレイアウトの自動配置機能である auto-fill と auto-fit について、その違いや具体的な使用例を交えながら解説しました。

これらの機能を使いこなすことで、様々な画面サイズに対応した、柔軟で美しいWebサイトの構築が可能になります。 ぜひ、今回の内容を参考に、グリッドレイアウトを活用してみてください。

関連記事