CSSグリッドにおけるrepeat関数

同じサイズが指定される列が複数ある場合、関数 repeat を使用して記述を簡略化できます。この関数の最初のパラメータには列の数を、 2番目のパラメータにはその幅を指定します。例を見て、その仕組みを確認しましょう。

例

同じサイズの3つの列があるとします：

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

repeat を使用して記述を簡略化します：

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

同じサイズの3つの列と、異なるサイズの4列目があるとします：

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

repeat を使用して記述を簡略化します：

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
}

最初の3つの列が同じサイズで、次の3つの列が別のサイズであるとします：

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

repeat を使用して記述を簡略化します：

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

最初の3つの列が同じサイズで、その後にもう1つの列があり、さらに別のサイズの3つの列があるとします：

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

repeat を使用して記述を簡略化します：

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

この簡略化はあらゆるサイズ単位で機能します。例として、3つの列がピクセル単位であるとします：

#parent {
	display: grid;
	grid-template-columns: 200px 200px 200px;
}

repeat を使用して記述を簡略化します：

#parent {
	display: grid;
	grid-template-columns: repeat(3, 200px);
}

repeat を使用して、同じサイズの 4 つの列を作成してください。

100px のサイズの列を 4 つと、 2fr のサイズの列を 3 つ作成してください。

100px のサイズの列を 2 つ、 200px のサイズの列を 3 つ、その後 1fr のサイズの列を1つ、そして 10% のサイズの列を 2 つ作成してください。