Función CSS repeat()
Funciones CSSEjemplo
Fragmento de una lista de pistas repetidas:
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Pruébalo »
Definición y uso
La función repeat() representa un fragmento repetido de la lista de pistas, lo que permite escribir una gran cantidad de columnas o filas que muestran un patrón repetido de forma más compacta.
Esta función se puede utilizar en propiedades CSS Grid.grid-template-columnsygrid-template-rows。
Versión compatible: CSS3
Compatibilidad del navegador
Los números de la tabla indican la primera versión del navegador que admite la función.
| Función | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
Sintaxis CSS
/* <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])
| Valor | Descripción |
|---|---|
| length | Longitud entera positiva. |
| percentage | Porcentaje no negativo relativo al tamaño en línea del contenedor de cuadrícula en las pistas de cuadrícula de columna y al tamaño de bloque del contenedor de cuadrícula en las pistas de cuadrícula de fila. Si el tamaño del contenedor de cuadrícula depende del tamaño de sus pistas, entonces percentage debe tratarse como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de las pistas al tamaño del contenedor de cuadrícula, aumentando el tamaño final de las pistas a la cantidad mínima necesaria para cumplir con ese porcentaje. |
| flex | Un tamaño no negativo con la unidad fr especifica el coeficiente de elasticidad de la pista. Cualquier pista cuyo tamaño se especifique con flex distribuirá el espacio restante en proporción a su coeficiente de elasticidad. |
| max-content | Representa el máximo del área de contenido máximo asignada a los elementos de cuadrícula que ocupan la pista de cuadrícula. |
| min-content | Representa el mínimo del área de contenido mínimo asignada a los elementos de cuadrícula que ocupan la pista de cuadrícula. |
| auto | Como valor máximo, equivale a max-content. Como valor mínimo, representa el máximo de los tamaños mínimos de los elementos de cuadrícula que ocupan la pista de cuadrícula (según lo especificado por min-width/min-height). |
| auto-fill | Si el contenedor de cuadrícula tiene un tamaño o tamaño máximo definido en el eje relevante, el número de repeticiones es el mayor entero positivo posible que no haga que la cuadrícula se desborde de su contenedor. Si está definido, cada pista se trata como su función de tamaño máximo de pista (cada valor independiente definido para grid-template-rows o grid-template-columns). De lo contrario, como función de tamaño mínimo de pista, añadiendo los huecos de la cuadrícula al cálculo. Si el número de repeticiones es demasiado alto, el valor de repetición es 1. De lo contrario, si el contenedor de cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el menor entero positivo posible que cumpla ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez. |
| auto-fit | El comportamiento es el mismo que auto-fill, excepto que después de colocar los elementos de la cuadrícula, todas las pistas repetidas vacías se colapsarán. Una pista vacía es aquella que no tiene elementos de cuadrícula que fluyan hacia ella o la atraviesen. (Si todas las pistas están vacías, puede provocar que todas se colapsen). Las pistas colapsadas se tratan como si tuvieran una única función de tamaño de pista fija de 0px, y los huecos de ambos lados se colapsan. Para encontrar el número de pistas de repetición automática, el agente de usuario limita el tamaño de las pistas al valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero. |
Otras extensiones