CSS Gridのrepeat関数の使い方

関数は、同じパターンを繰り返して配置する際に便利な機能です。以下に、repeat関数の使い方といくつかのコード例を紹介します。

repeat関数は、2つの引数を受け取ります。第1引数は繰り返す回数、第2引数は繰り返すパターンです。例えば、次のようなコードを考えてみましょう。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
}

この場合、grid-template-columnsプロパティにrepeat(3, 100px)と指定しています。これは、100pxの幅を持つ列を3回繰り返すという意味です。つまり、3つの列が作成され、それぞれの幅は100pxです。

さらに、repeat関数は他の値と組み合わせて使用することもできます。例えば、次のようなコードでは、異なる幅の列を交互に繰り返して配置しています。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px 200px);
}

この場合、100pxの幅を持つ列と200pxの幅を持つ列が交互に繰り返されます。つまり、100px、200px、100px、200px、100px、200pxの列の順に配置されます。

repeat関数は、グリッドの行（grid-template-rows）にも同様に使用することができます。幅だけでなく、高さを指定する場合にも便利です。

以上が、CSS Gridのrepeat関数の基本的な使い方です。この関数を活用することで、繰り返しパターンを簡潔に記述できます。これにより、コードの量を減らし、メンテナンス性を向上させることができます。

この記事では、CSS Gridのrepeat関数について解説し、いくつかの具体的なコード例を示しました。これを参考にして、自身のプロジェクトで効果的に活用してみてください。