Funkcija repeat u CSS gridovima

Ako imate više kolona, kojima se zadaju jednake veličine, onda možete pojednostaviti zapis korišćenjem funkcije repeat. U prvom parametru ove funkcije se navodi broj kolona, a u drugom - njihova širina. Pogledajmo na primerima, kako ovo funkcioniše.

Primer

Recimo da imamo tri kolone iste veličine:

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

Pojednostavimo zapis pomoću repeat:

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

Primer

Recimo da imamo tri kolone iste veličine, a četvrta druge veličine:

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

Pojednostavimo zapis pomoću repeat:

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

Primer

Recimo da imamo prve tri kolone jedne veličine, a druge tri kolone druge veličine:

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

Pojednostavimo zapis pomoću repeat:

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

Primer

Recimo da imamo prve tri kolone jedne veličine, zatim još jedna kolona, a zatim još tri kolone druge veličine:

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

Pojednostavimo zapis pomoću repeat:

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

Primer

Pojednostavljenje funkcioniše za bilo koje jedinice veličina. Recimo za primer da imamo tri kolone u pikselima:

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

Pojednostavimo zapis pomoću repeat:

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

Praktični zadaci