repeat()

This translation is incomplete. Please help translate this article from English

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
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
auto-fit

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
repeat()Chrome Soporte completo 57
Soporte completo 57
Soporte completo 38
Deshabilitado
Deshabilitado From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 16Firefox Soporte parcial 57
Notas
Soporte parcial 57
Notas
Notas repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
Sin soporte 52 — 57
Notas
Notas calc() doesn't work in repeat() (see bug 1350069).
Sin soporte 40 — 59
Deshabilitado
Deshabilitado From version 40 until version 59 (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 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 10.1WebView Android Soporte completo 57Chrome Android Soporte completo 57
Soporte completo 57
Soporte completo 38
Deshabilitado
Deshabilitado From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Soporte completo 52
Soporte completo 52
Sin soporte 40 — 59
Deshabilitado
Deshabilitado From version 40 until version 59 (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 Soporte completo 43
Soporte completo 43
Soporte completo 28
Deshabilitado
Deshabilitado From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Soporte parcial  
Soporte parcial
Sin soporte  
Sin soporte
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.