05. Columnas y filas repetidas

En ciertos casos, en las propiedades grid-template-columns y grid-template-rows podemos necesitar indicar las mismas cantidades varias veces, resultando una tarea repetitiva. Existe la expresión repeat() para indicar repetición de valores, indicando el número de veces que se repiten y el tamaño en cuestión.

La expresión a utilizar sería la siguiente: repeat([núm de veces], [valor o valores]).

Ejm

    .grid {
      display: grid;
      grid-template-columns: 100px repeat(2, 50px) 200px;
      grid-template-rows: repeat(2, 50px 100px);
    }

Asumiendo que tenemos un contenedor grid con 8 ítems hijos, el ejemplo anterior crearía una cuadrícula con 4 columnas (la primera de 100px de ancho, la segunda y tercera de 50px de ancho y la cuarta de 200px de ancho). Por otro lado, tenemos 2 filas (la primera de 50px de alto, y la segunda de 100px de alto). En el caso de tener más ítems hijos, el patrón se seguiría repitiendo.

El ejemplo anterior sería equivalente al código CSS siguiente.

Ejm

    .grid {
      display: grid;
      grid-template-columns: 100px 50px 50px 200px;
      grid-template-rows: 50px 100px 50px 100px;
    }
Scroll al inicio