repeat()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
試してみましょう
この関数は CSS グリッドのプロパティである grid-template-columns
と grid-template-rows
の中で使うことができます。
構文
/* <track-repeat> 値 */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])
/* <auto-repeat> 値 */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
/* <fixed-repeat> 値 */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
repeat()
関数は 2 つの引数を取ります。
- 反復回数: 最初の引数は、トラックリストが繰り返される回数を指定します。これは 1 以上の整数値で指定するか、キーワード値
auto-fill
またはauto-fit
で指定します。これらのキーワード値は、グリッドコンテナーを埋めるのに必要な回数だけトラックの組み合わせを繰り返します。 - トラック: 2 番目の引数は、繰り返されるトラックの組み合わせを指定します。基本的にこれは 1 つ以上の値で構成され、それぞれの値はそのトラックのサイズを表します。それぞれのサイズは
<track-size>
または<fixed-size>
で指定します。また、トラックサイズの前後に<line-names>
値を提供することで、各トラックの前後に 1 つ以上の行名を指定することもできます。
auto-fill
や auto-fit
を使用して反復回数を設定する場合、<fixed-size>
型を使用してのみトラックサイズを指定することができ、 <track-size>
型を使用することはできません。これで repeat()
の構文が 3 種類になりました。
<track-repeat>
は次のいずれかです。- 反復回数を設定する整数
- トラックのサイズを設定する
<track-size>
値
<auto-repeat>
は次のいずれかです。- 反復回数を設定する
auto-fill
またはauto-fit
- トラックのサイズを設定する
<fixed-size>
値
- 反復回数を設定する
<fixed-repeat>
は次のいずれかです。- 反復回数を設定する整数
- トラックのサイズを設定する
<fixed-size>
値
プロパティ宣言で <auto-repeat>
を用いた場合、<fixed-repeat>
を使用するのは repeat()
を呼び出すときだけです。例えば、この例は <auto-repeat>
形式と <track-repeat>
形式を結合しているので不正です。
.wrapper {
grid-template-columns:
repeat(auto-fill, 10px)
repeat(2, minmax(min-content, max-content));
}
サブグリッドに行名を追加するために使用する <name-repeat>
という第 4 の形式があります。これは subgrid
キーワードでのみ使用し、行名のみを指定し、トラックサイズは指定しません。
値
<fixed-size>
-
以下の形式のいずれかです。
<length-percentage>
値minmax()
関数min
は<length-percentage>
値で指定max
は<length-percentage>
値、<flex>
値、またはmin-content
,max-content
,auto
のキーワード値のいずれかで指定
minmax()
関数min
は<length-percentage>
値またはmin-content
,max-content
,auto
のキーワード値のいずれかで指定max
は<length-percentage>
値で指定
<flex>
-
単位
fr
でトラックのフレックス係数を指定します。それぞれの<flex>
サイズのトラックは、そのフレックス係数に比例して残りの空間を占めます。 <length>
-
正の整数の長さです。
<line-names>
-
0 個以上の空白区切りの
<custom-ident>
値を角括弧で囲んだもの。例えば[first header-start]
。 <percentage>
-
列グリッドトラックではグリッドコンテナーのインラインサイズ、行グリッドトラックではグリッドコンテナーのブロックサイズに対する、非負のパーセントを指定します。グリッドコンテナーのサイズがトラックのサイズに依存する場合、
<percentage>
はauto
として扱われなければなりません。ユーザーエージェントは、トラックの内在サイズの寄与をグリッドコンテナーのサイズに調整し、パーセント値を尊重する結果となる最小量だけトラックの最終サイズを大きくすることができます。 <track-size>
-
以下の形式のいずれかです。
<length-percentage>
値、<flex>
値、またはmin-content
,max-content
,auto
のキーワード値のいずれかで指定minmax()
関数min
は<length-percentage>
値、またはmin-content
,max-content
,auto
のキーワード値のいずれかで指定max
は<length-percentage>
値、<flex>
値、またはmin-content
,max-content
,auto
のキーワード値のいずれかで指定
fit-content()
関数に<length-percentage>
値を渡したもの
auto
-
最大値としては、
max-content
と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ(min-width
/min-height
で指定されたもの)を表します。 auto-fill
-
グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数(
grid-template-rows
またはgrid-template-columns
を定義するために使用されるそれぞれ独立した値)として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは1
回のみ繰り返します。 auto-fit
-
auto-fill
と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。(これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)折りたたまれたトラックは、
0px
の単一の固定されたトラックサイジング関数を持つものとして扱われ、その両側の溝は折りたたまれます。自動反復トラックの数を探すため、ユーザーエージェントはトラックサイズをユーザーエージェントが指定する値(例えば、
1px
)で割り、ゼロによる除算を避けます。 max-content
-
グリッドトラックを占めるグリッドアイテムの最も大きな最大コンテンツ寄与を表します。
min-content
-
グリッドトラックを占めるグリッドアイテムの最も大きな最小コンテンツ寄与を表します。
例
repeat() を使用したグリッド列の指定
HTML
<div id="container">
<div>このアイテムの幅は 50 ピクセルです。</div>
<div>幅が自由なアイテムです。</div>
<div>このアイテムの幅は 50 ピクセルです。</div>
<div>幅が自由なアイテムです。</div>
<div>幅 100 ピクセルの柔軟性のないアイテムです。</div>
</div>
CSS
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
結果
仕様書
Specification |
---|
CSS Grid Layout Module Level 2 # repeat-notation |
ブラウザーの互換性
BCD tables only load in the browser