Función repeat en CSS Grid

Si tienes varias columnas a las que se les asignan los mismos tamaños, puedes simplificar la escritura usando la función repeat. En el primer parámetro de esta función se especifica la cantidad de columnas, y en el segundo - su ancho. Veamos con ejemplos cómo funciona esto.

Ejemplo

Supongamos que tenemos tres columnas del mismo tamaño:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Simplifiquemos la escritura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Ejemplo

Supongamos que tenemos tres columnas del mismo tamaño, y una cuarta de otro tamaño:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Simplifiquemos la escritura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Ejemplo

Supongamos que tenemos las primeras tres columnas de un tamaño, y las segundas tres columnas de otro tamaño:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Simplifiquemos la escritura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Ejemplo

Supongamos que tenemos las primeras tres columnas de un tamaño, luego otra columna, y luego otras tres columnas de otro tamaño:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Simplifiquemos la escritura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Ejemplo

La simplificación funciona para cualquier unidad de tamaño. Supongamos, por ejemplo, que tenemos tres columnas en píxeles:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Simplifiquemos la escritura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Tareas prácticas