【CSS Modules】repeat()関数の使い方
repeat()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
repeat()関数は、CSS Grid Layoutにおいて、グリッドの行や列（グリッドトラック）の定義を繰り返して記述する際に使用される関数です。この関数を用いることで、同じ定義のトラックを複数回記述する手間を省き、CSSコードをより簡潔かつ効率的に記述することが可能になります。主に、グリッドコンテナのレイアウトを定義するgrid-template-columnsプロパティやgrid-template-rowsプロパティの値として利用されます。
repeat()関数は、大きく分けて二つの使い方があります。一つは、繰り返しの回数を数値で明示的に指定する方法です。例えば、repeat(3, 1fr)と記述すると、1fr 1fr 1frと同じ意味になり、幅が均等な3つの列を簡単に作成できます。もう一つは、auto-fillまたはauto-fitキーワードを使用して、グリッドコンテナの利用可能なスペースに応じてトラックの数を自動的に決定する方法です。auto-fillは、コンテナに収まるだけトラックを作成し、余ったスペースがあってもトラックのサイズは固定されます。一方auto-fitは、未使用のトラックが存在する場合、それらを折りたたみ、残りのトラックが利用可能なスペースを分配するように動作します。
これらの引数の後に続く「トラックリスト」には、繰り返したいトラックのサイズや定義を指定します。例えば、1frは利用可能なスペースを均等に分割することを意味し、minmax(100px, 1fr)は最小で100ピクセル、最大で残りのスペースを均等に分割するという柔軟な幅を設定できます。repeat()関数を適切に利用することで、多様なグリッドレイアウトを少ないコード量で実現し、レスポンシブなデザインへの対応も容易になります。
構文(syntax)
1grid-template-columns: repeat(3, 1fr);
引数(parameters)
<integer> | auto-fill | auto-fit, <track-list>
- <integer> | auto-fill | auto-fit: 繰り返し回数または自動設定を指定する値
- <track-list>: 指定したトラックリストを繰り返します
戻り値(return)
repeat()関数は、指定したトラックリストを繰り返し配置するためのCSS関数です。この関数は、繰り返しパターンを定義した<track-list>を返します。