Traducción en curso

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

Esta función puede ser usada en las propiedades CSS Grid grid-template-columns y grid-template-rows.

/* <track-repeat> values */
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> values */
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> values */
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])

Síntaxis

Valores

<length>
Una longitud no negativa.
<percentage>
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
<flex>
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
max-content
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
min-content
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
auto
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en min-width/min-height) de los elementos de la cuadrícula ocupando la pista.
auto-fill
If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. Treating each track as its maximal track sizing function, if that is definite. Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is 1. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.
auto-fit

Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)

A collapsed track is treated as having a fixed track sizing function of 0px, and the gutters on either side of it collapse.

For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., 1px), to avoid division by zero.

Formal syntax

Syntax not found in DB!

Ejemplo

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;
}

HTML

<div id="container">
  <div>
    Este elemento tiene un ancho de 50 pixels.
  </div>
  <div>
    Elemento con un ancho flexible.
  </div>
  <div>
    Este elemento tiene un ancho de 50 pixels.
  </div>
  <div>
    Elemento con un ancho flexible.
  </div>
  <div>
    Este elemento tiene un ancho de 100 pixels.
  </div>
</div>

Resultados

Especificaciones

Specification Status Comment
CSS Grid Layout
La definición de 'repeat()' en esta especificación.
Candidate Recommendation Initial definition

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 57
Soporte completo 57
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 16Firefox Soporte completo 57
Soporte completo 57
Sin soporte 52 — 57
Notas
Notas calc() doesn't work in repeat() (see bug 1350069).
Sin soporte ? — 52
Deshabilitado
Deshabilitado Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 44
Soporte completo 44
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 57
Soporte completo 57
Sin soporte 52 — 57
Notas
Notas calc() doesn't work in repeat() (see bug 1350069).
Sin soporte ? — 52
Deshabilitado
Deshabilitado Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Soporte completo 10.3Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, IsraelFloresDGA
Última actualización por: mdnwebdocs-bot,