Funktionen repeat i CSS-grid

Om du har flera kolumner som tilldelas samma storlekar, kan du förenkla skrivandet genom att använda funktionen repeat. I den första parametern för denna funktion anges antalet kolumner, och i den andra - deras bredd. Låt oss titta på exempel på hur detta fungerar.

Exempel

Låt oss säga att vi har tre kolumner med samma storlek:

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

Förenkla skrivandet med repeat:

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

Exempel

Låt oss säga att vi har tre kolumner med samma storlek, och en fjärde med en annan storlek:

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

Förenkla skrivandet med repeat:

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

Exempel

Låt oss säga att de första tre kolumnerna har en storlek, och de andra tre kolumnerna har en annan storlek:

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

Förenkla skrivandet med repeat:

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

Exempel

Låt oss säga att vi har de första tre kolumnerna med en storlek, sedan ytterligare en kolumn, och sedan ytterligare tre kolumner med en annan storlek:

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

Förenkla skrivandet med repeat:

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

Exempel

Förenklingen fungerar för alla enheter för storlekar. Låt oss som exempel anta att vi har tre kolumner i pixlar:

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

Förenkla skrivandet med repeat:

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

Praktiska uppgifter