Funkcija repeat v CSS mrežah

Če imate več stolpcev, ki imajo določene enake velikosti, lahko poenostavite zapis z uporabo funkcije repeat. V prvem parametru te funkcije je določeno število stolpcev, v drugem pa njihova širina. Poglejmo si s primeri, kako to deluje.

Primer

Recimo, da imamo tri stolpce enake velikosti:

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

Poenostavimo zapis z repeat:

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

Primer

Recimo, da imamo tri stolpce enake velikosti, četrti pa drugačne velikosti:

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

Poenostavimo zapis z repeat:

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

Primer

Recimo, da so prvi trije stolpci enake velikosti, drugi trije stolpci pa drugačne velikosti:

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

Poenostavimo zapis z repeat:

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

Primer

Recimo, da so prvi trije stolpci enake velikosti, nato še en stolpec, nato pa še trije stolpci drugačne velikosti:

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

Poenostavimo zapis z repeat:

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

Primer

Poenostavitev deluje za vse enote velikosti. Recimo za primer, da imamo tri stolpce v slikovnih pikah:

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

Poenostavimo zapis z repeat:

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

Praktične naloge