• Home
  • Web制作
  • グリッドレイアウトを極める！ repeat関数の魅力に迫る

グリッドレイアウトを極める！ repeat関数の魅力に迫る

schedule update
Tags: CSS

はじめに：repeat関数を使いこなそう！

Webページのレイアウトにおいて、グリッドレイアウトは非常に強力なツールの一つです。特に、多数の要素を規則的に配置する際にその真価を発揮します。

しかし、要素の数が増えるにつれて、grid-template-columnsやgrid-template-rowsプロパティへの記述が煩雑になることも少なくありません。 そこで活躍するのが、今回ご紹介する「repeat関数」です。

repeat関数を活用することで、簡潔で可読性の高いコードで、柔軟なグリッドレイアウトを実現できます。

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

repeat関数とは？基本的な使い方を解説！

repeat関数は、グリッドトラックの定義を繰り返すための関数です。 これにより、冗長な記述を避けつつ、効率的にグリッドレイアウトを構築できます。

基本的な構文は以下の通りです。

repeat(繰り返し回数, トラックのサイズ)

例えば、幅100pxのグリッドトラックを3回繰り返したい場合は、以下のように記述します。

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

これは、以下のように記述するのと同じ意味になります。

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

repeat関数の応用例： 様々なシーンで活用しよう

repeat関数は、単なる繰り返しだけでなく、様々な応用が可能です。 ここでは、具体的な例を挙げながら、repeat関数の柔軟な活用方法をご紹介します。

1. 自動計算で効率アップ！

repeat関数では、トラックのサイズにfr単位を用いることで、残りの空きスペースを自動計算できます。

例えば、以下のコードは、3つのカラムを均等に配置し、残りのスペースを自動調整します。

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

2. 複雑なレイアウトもシンプルに

repeat関数は、他のトラック定義と組み合わせることも可能です。

例えば、サイドバーとメインコンテンツのようなレイアウトを実現する場合、以下のように記述できます。

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

これは、200pxのサイドバーと、残りのスペースを3等分したメインコンテンツを意味します。

まとめ：repeat関数をマスターして、グリッドレイアウトをもっと使いこなそう！

repeat関数は、グリッドレイアウトをより効率的かつ柔軟に構築するための強力なツールです。 基本的な使い方から応用例まで、様々なパターンを理解することで、より高度なWebページレイアウトを実現できます。

ぜひ、本記事を参考に、repeat関数をマスターして、Web制作のスキルアップを目指しましょう。

関連記事