repeat() ノウテイション
repeat() ノウテイションは、引数に指定された回数とサイズの繰り返しを返す CSS 関数です。
display: grid; でのプロパティ、grid-template-columns や grid-template-rows で使用します。
.contena {
display: grid;
grid-template-columns: repeat( auto-fill, 300px );
}
動作の確認はExampleを参照してください
ページ内 Index
構文(Syntax)
CSS
repeat( [ <integer [1,∞]> | auto-fill | auto-fit ] , <track-list> )
引数
| 引数 | 摘要 |
|---|---|
| <integer [1,∞]> | 繰り返し回数。正の整数。以下の auto-fill、auto-fit が使える |
| auto-fill | コンテナの大きさに合わせてアイテムの個数を増やす |
| auto-fit | コンテナの大きさに合わせてアイテムの大きさを変える |
| <track-list> | 繰り返しの大きさのリスト |
Example
repeat()の例です。繰り返しの指定 auto-fill を指定しています。
auto-fit の指定でアイテムの横幅を可変する場合は minmax() を使用します。以下の場合は minmax( 100px,1fr ) のようにします。